@use '../../../style/elements/ui-spacing.scss';
@import '../../../components/space/style/space-mixins.scss';

@mixin blockquoteStyle() {
  --blockquote-padding-top: 2rem;
  --blockquote-padding-left: 1.5rem;
  --blockquote-padding-bottom: 3rem;

  // quote
  --blockquote-quote-size: 3rem;
  --blockquote-quote-padding: 6rem;

  // font
  --blockquote-cite-style: italic;

  display: inline-block;
  width: auto;

  @include spaceReset();
  padding: 1.5rem;

  font-size: var(--font-size-small);
  line-height: var(--line-height-small);

  border-radius: 1rem;

  // gfx icon
  position: relative;
  &::before {
    content: '';
    position: absolute;
    top: var(--blockquote-padding-top);
    left: var(--blockquote-padding-left);
    width: var(--blockquote-quote-size);
    height: var(--blockquote-quote-size);

    background-size: cover;

    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgZmlsbD0ibm9uZSI+ICA8cGF0aCBmaWxsPSIjQTVFMUQyIiBzdHJva2U9IiNBNUUxRDIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiIGQ9Ik0zNy41IDI3LjVhOSA5IDAgMSAwIDAtMTggOSA5IDAgMCAwIDAgMTh6Ii8+ICA8cGF0aCBzdHJva2U9IiNBNUUxRDIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiIGQ9Ik00Ni41IDE4LjVhMjEgMjEgMCAwIDEtMjEgMjEiLz4gIDxwYXRoIGZpbGw9IiNBNUUxRDIiIHN0cm9rZT0iI0E1RTFEMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjEuNSIgZD0iTTEzLjUgMjcuNWE5IDkgMCAxIDAgMC0xOCA5IDkgMCAwIDAgMCAxOHoiLz4gIDxwYXRoIHN0cm9rZT0iI0E1RTFEMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjEuNSIgZD0iTTIyLjUgMTguNWEyMSAyMSAwIDAgMS0yMSAyMSIvPjwvc3ZnPg==');
  }

  // default
  // stylelint-disable-next-line
  &,
  &.dnb-blockquote--left {
    padding-left: var(--blockquote-quote-padding);
    padding-top: var(--blockquote-padding-top);
    padding-bottom: var(--blockquote-padding-bottom);
  }

  &.dnb-blockquote--top {
    padding-left: var(--blockquote-padding-left);
    padding-top: var(--blockquote-quote-padding);
    padding-bottom: var(--blockquote-padding-bottom);
  }

  &.dnb-blockquote--no-background {
    background-color: transparent;
  }

  // styles not defined elsewhere
  .dnb-cite,
  .dnb-figcaption,
  cite,
  footer,
  figcaption {
    display: block;
    margin-top: 1rem;

    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-basis);
    font-style: var(--blockquote-cite-style);

    &::before {
      content: '—';
      display: inline-block;
      padding-right: 0.5rem;
    }
  }

  .dnb-spacing & h1,
  .dnb-spacing & h2,
  .dnb-spacing & h3,
  .dnb-spacing & .dnb-h--xx-large,
  .dnb-spacing & .dnb-h--large,
  .dnb-spacing & .dnb-h--medium,
  .dnb-spacing & .dnb-lead {
    margin: 0;
  }

  .dnb-anchor {
    font-size: inherit;
  }
  .dnb-code {
    color: var(--color-black-80);
  }
}

@mixin blockquoteTag() {
  blockquote {
    @include blockquoteStyle();
  }
  .dnb-spacing blockquote {
    @include ui-spacing.defaultSpacing();
    p:last-child {
      margin-bottom: 0;
    }
  }
}