@import './../functions', './../mixins', './../variables';

$blockquote: (
  'margin-top': 20,
  'margin-top_md': 30,
  'margin-bottom': 10,
  'margin-bottom_md': 20,
  'padding-vertical': 4,
  'padding-left': 24,
  'font-size': 18,
  'font-size_md': 20,
  'line-height': 28,
  'border-width': 6,
  'subtle': (
    'font-size': 16,
    'font-size_md': 18,
    'border-width': 3,
  ),
);

@layer base {
  blockquote {
    margin: px-to-rem(get-map($blockquote, 'margin-top')) 0
      px-to-rem(get-map($blockquote, 'margin-bottom'));
    padding: px-to-rem(get-map($blockquote, 'padding-vertical')) 0 0
      px-to-rem(get-map($blockquote, 'padding-left'));
    font-size: px-to-rem(get-map($blockquote, 'font-size'));
    color: get-map($theme, 'blockquote');
    font-weight: 700;
    font-style: italic;
    line-height: px-to-rem(get-map($blockquote, 'line-height'));
    border-left: px-to-rem(get-map($blockquote, 'border-width')) solid
      get-map($theme, 'blockquote_border');

    &.subtle {
      font-size: px-to-rem(get-map($blockquote, 'subtle', 'font-size'));
      font-weight: normal;
      font-style: normal;
      border-left-width: px-to-rem(get-map($blockquote, 'subtle', 'border-width'));
      border-left-color: get-map($theme, 'blockquote_subtle_border');

      strong {
        font-weight: 900;
      }
    }

    // When there are multiple blockquotes in a row (e.g. in a rich text editor), remove the margin
    // to make it seem like they're part of the same blockquote
    &:has(+ blockquote) {
      margin-bottom: 0;
    }

    & + blockquote {
      margin-top: 0;
    }

    p,
    span,
    strong,
    em,
    div,
    li,
    dt,
    dd {
      font-weight: inherit;
    }

    p:last-of-type {
      margin-bottom: 0;
    }

    @include breakpoint('min-width', 'md') {
      margin-top: px-to-rem(get-map($blockquote, 'margin-top_md'));
      margin-bottom: px-to-rem(get-map($blockquote, 'margin-bottom_md'));
      font-size: px-to-rem(get-map($blockquote, 'font-size_md'));

      &.subtle {
        font-size: px-to-rem(get-map($blockquote, 'subtle', 'font-size_md'));
      }
    }
  }
}
