/**
 * Copyright IBM Corp. 2016, 2025
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */

@use '@carbon/styles/scss/breakpoint' as *;
@use '@carbon/styles/scss/config' as *;
@use '@carbon/styles/scss/spacing' as *;
@use '@carbon/styles/scss/theme' as *;
@use '@carbon/styles/scss/type' as *;
@use '../../globals/utils/flex-grid' as *;
@use '../../globals/vars' as *;
@use '../../globals/imports' as *;
@use '../../globals/utils/hang' as *;
@use '../../components/horizontal-rule';
@use '../../components/link-with-icon' as *;

@mixin quote {
  :host(#{$c4d-prefix}-quote) {
    display: block;
    background: $background;
    padding-block-end: $spacing-10;
    @include hang;

    .#{$prefix}--link-with-icon__container {
      max-inline-size: 80%;
      padding-inline-start: $spacing-05;
    }

    &[lang='ar'],
    &[lang='zh'],
    &[lang='jp'],
    &[lang='ko'] {
      .#{$prefix}--quote__copy {
        @include font-family('sans');
      }
    }
  }

  .#{$prefix}--quote__container {
    @include make-row;
  }

  .#{$prefix}--quote__wrapper {
    position: relative;
  }

  .#{$prefix}--quote__copy {
    @include make-col-ready;
    @include type-style('quotation-01', true);

    padding: 0 $spacing-07 $spacing-07 $spacing-07;
    margin: 0;

    word-break: break-word;

    @include breakpoint(md) {
      padding-block-end: $spacing-09;
      @include type-style('quotation-02', true);
    }
  }

  .#{$prefix}--quote__mark {
    @include type-style('quotation-01', true);
    @include font-family('serif');

    @include breakpoint-down(md) {
      // this value was chosen by visually stay the closest as possible from the quotation text in the small breakpoint
      inset-inline-start: 1.4rem;
    }

    @include breakpoint(md) {
      @include type-style('quotation-02', true);
    }

    position: absolute;
    // this value was chosen by visually stay the closest as possible from the quotation text in the md and above breakpoints
    inset-inline-start: 0.6rem;
  }

  .#{$prefix}--quote__mark-corner-bracket {
    @include breakpoint(sm) {
      inset-inline-start: 0.6rem;
    }

    @include breakpoint(md) {
      inset-inline-start: calc(-1 * #{$spacing-03});
    }

    @include breakpoint(lg) {
      inset-inline-start: calc(-1 * #{$spacing-05});
    }

    @include breakpoint(max) {
      inset-inline-start: calc(-1 * #{$spacing-07});
    }
  }

  .#{$prefix}--quote__source {
    @include make-col-ready;

    @include breakpoint-down(md) {
      padding-block-end: $spacing-05;
    }

    max-inline-size: 80%;
    padding-block-end: $spacing-09;
  }

  :host(#{$c4d-prefix}-quote-source-bottom-copy),
  :host(#{$c4d-prefix}-quote-source-copy),
  :host(#{$c4d-prefix}-quote-source-heading) {
    display: block;
  }

  :host(#{$c4d-prefix}-quote-source-heading) {
    padding-inline-start: $spacing-05;
    @include type-style(heading-02, true);
  }

  :host(#{$c4d-prefix}-quote-source-copy) {
    padding-inline-start: $spacing-05;
    @include type-style(body-02, true);
  }

  :host(#{$c4d-prefix}-quote-source-bottom-copy) {
    padding-inline-start: $spacing-05;
    @include type-style(body-02, true);
  }

  .#{$prefix}--quote__mark-closing {
    margin-inline-start: calc(-1 * #{$spacing-02});

    @include breakpoint(md) {
      margin-inline-start: calc(-1 * #{$spacing-03});
    }
  }

  :host(#{$c4d-prefix}-quote) .#{$prefix}--quote__footer {
    padding-inline: $spacing-05;

    ::slotted(#{$c4d-prefix}-quote-link-with-icon) {
      margin-inline-start: $spacing-05;
    }
  }

  .#{$prefix}--callout__container,
  :host(#{$c4d-prefix}-callout) {
    @include make-row;
  }

  .#{$prefix}--callout__column {
    @include make-col-ready;
  }

  .#{$prefix}--callout__content {
    @include breakpoint(sm) {
      padding-block-start: $spacing-07;
    }

    @include breakpoint(md) {
      @include make-col-offset(1, 8);
      @include make-col(6, 8);

      padding-block-start: $spacing-10;
      padding-inline: $spacing-02;
    }

    @include breakpoint(lg) {
      padding-inline: $spacing-01;
      @include make-col-offset(1, 12);
      @include make-col(10, 12);
    }
  }

  :host(#{$c4d-prefix}-quote) #{$c4d-prefix}-hr {
    margin: $spacing-05;
    @include breakpoint(md) {
      margin: $spacing-05 0;
    }
    @include breakpoint(lg) {
      margin: $spacing-05 $spacing-03;
    }
  }

  :host(#{$c4d-prefix}-quote-link-with-icon) {
    @extend .#{$c4d-prefix}--link-with-icon !optional;

    display: inline-block;
  }

  //Hiding bubble-pointer as bubble-quote is mobible only
  .#{$prefix}-bubble-quote {
    .bubble-pointer {
      display: none;
    }
  }

  //Bubble-quote variation is mobile only
  @include breakpoint-down(md) {
    .#{$prefix}-bubble-quote {
      position: relative;
      padding: 2.5rem;
      border: 1px solid #8d8d8d;
      border-radius: 0.25rem;
      background: #f4f4f4;
      margin-block-end: 3.81rem; /* match svg pointer height */
      margin-inline: 16px;
      max-inline-size: calc(100% - 32px);

      .bubble-pointer {
        --fill: #f4f4f4;
        --stroke: #8d8d8d;

        position: absolute;

        display: block;
        inset-block-start: 100%;
        inset-inline-start: 2rem;
      }

      .bubble-pointer-fill {
        fill: var(--fill);
      }

      .bubble-pointer-stroke {
        stroke: var(--stroke);
      }
    }
  }

  @include breakpoint-down(md) {
    :host([appearance='bubble-quote']),
    :host([appearance='card']) {
      span.cds--quote__mark[part~='mark--opening'] {
        z-index: 1;
        inset-block-start: 2.5rem;
        inset-inline-start: 2.8rem;
      }
    }
  }

  @include breakpoint-down(md) {
    :host([appearance='bubble-quote'])[mark-type='corner-bracket'],
    :host([appearance='card'])[mark-type='corner-bracket'] {
      span.cds--quote__mark[part~='mark--opening'] {
        inset-inline-start: 2.2rem;
      }
    }
  }

  @include breakpoint-up(md) {
    :host([appearance='bubble-quote'])[mark-type='corner-bracket'],
    :host([appearance='card'])[mark-type='corner-bracket'] {
      span.cds--quote__mark[part~='mark--opening'] {
        inset-inline-start: -1.125rem;
      }
    }
  }

  /* Mirroing the bubble quote in RTL modes */
  :host([lang='ar']) .#{$prefix}-bubble-quote .bubble-pointer {
    inset-inline: auto 2rem;
    transform: scaleX(-1);
  }
}