import styled, { css } from 'styled-components';

import { colors, spaces, typography } from '@/styles/variables';

import { IQuote } from './Quote.interface';

export const StyledQuote = styled.div<IQuote>`
  color: currentColor;
  margin-bottom: ${spaces[2]};
  padding: 0 ${spaces[4]};
  font-size: ${typography.texts.size};
  border-left: 2px solid ${colors.gray50};

  & blockquote {
    margin-left: 0;
    margin-bottom: ${spaces[2]};

    & p {
      margin-bottom: 0;
    }
  }

  & figcaption {
    font-weight: bold
  }
`;