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

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

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

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

  display: inline-block;
  width: auto;

  @include space-mixins.spaceReset();
  padding: 1.5rem;

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

  border-radius: 1rem;

  color: var(--token-color-text-action-ondark);
  background-color: var(--token-color-decorative-first-intense-static);

  // gfx icon
  position: relative;
  .dnb-blockquote__quote-icon {
    position: absolute;
    top: var(--blockquote-padding-top);
    left: var(--blockquote-padding-left);
    width: var(--blockquote-quote-size);
    height: var(--blockquote-quote-size);
    color: var(--blockquote-icon-color, currentcolor);
    fill: currentcolor;
    stroke: currentcolor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .dnb-anchor {
    font-size: inherit;
  }

  &,
  &.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 {
    color: inherit;
    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;
  }
}