text: import { css } from 'styled-components';
  import theme from './theme';
  import media from './media';
  const { colors, fontSizes, fonts } = theme;
  
  const mixins = {
    flexCenter: css`
      display: flex;
      justify-content: center;
      align-items: center;
    `,
  
    flexBetween: css`
      display: flex;
      justify-content: space-between;
      align-items: center;
    `,
  
    outline: css`
      outline: 1px solid red;
    `,
  
    link: css`
      display: inline-block;
      text-decoration: none;
      text-decoration-skip-ink: auto;
      color: inherit;
      position: relative;
      transition: ${theme.transition};
      cursor: pointer;
      &:hover,
      &:active,
      &:focus {
        color: ${colors.black};
        outline: 0;
      }
    `,
  
    inlineLink: css`
      display: inline-block;
      text-decoration: none;
      text-decoration-skip-ink: auto;
      position: relative;
      transition: ${theme.transition};
      cursor: pointer;
      color: ${colors.black};
      &:hover,
      &:focus,
      &:active {
        color: ${colors.black};
        outline: 0;
        &:after {
          width: 100%;
        }
        & > * {
          color: ${colors.black} !important;
          transition: ${theme.transition};
        }
      }
      &:after {
        content: '';
        display: block;
        width: 0;
        height: 1px;
        position: relative;
        bottom: 0.37em;
        background-color: ${colors.darkGrey};
        transition: ${theme.transition};
        opacity: 0.5;
      }
    `,
  
    smallButton: css`
      color: ${colors.darkGrey};
      background-color: transparent;
      border: 1px solid ${colors.darkGrey};
      border-radius: ${theme.borderRadius};
      padding: 0.75rem 1rem;
      font-size: ${fontSizes.smish};
      font-family: ${fonts.Roboto};
      line-height: 1;
      text-decoration: none;
      cursor: pointer;
      transition: ${theme.transition};
      &:hover,
      &:focus,
      &:active {
        background-color: ${colors.white};
      }
      &:after {
        display: none !important;
      }
    `,
  
    bigButton: css`
      color: ${colors.black};
      background-color: transparent;
      border: 1px solid ${colors.black};
      border-radius: ${theme.borderRadius};
      padding: 1.25rem 1.75rem;
      font-size: ${fontSizes.sm};
      font-family: ${fonts.Roboto};
      line-height: 1;
      text-decoration: none;
      cursor: pointer;
      transition: ${theme.transition};
      &:hover,
      &:focus,
      &:active {
        background-color: ${colors.transGreen};
      }
      &:after {
        display: none !important;
      }
    `,
  
    sidePadding: css`
      padding: 0 150px;
      ${media.desktop`padding: 0 100px;`};
      ${media.tablet`padding: 0 50px;`};
      ${media.phablet`padding: 0 25px;`};
    `,
  
    boxShadow: css`
      box-shadow: 0 10px 30px -15px ${colors.shadowNavy};
      transition: ${theme.transition};
      &:hover,
      &:focus {
        box-shadow: 0 20px 30px -15px ${colors.shadowNavy};
      }
    `,
  
    fancyList: css`
      padding: 0;
      margin: 0;
      list-style: none;
      font-size: ${fontSizes.lg};
      li {
        position: relative;
        padding-left: 30px;
        margin-bottom: 10px;
        &:before {
          content: '▹';
          position: absolute;
          left: 0;
          color: ${colors.black};
        }
      }
    `,
  };
  
  export default mixins;