/**
 * 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/vars' as *;
@use '../../globals/imports' as *;
@use '../../globals/utils/hang' as *;
@use '../../globals/utils/flex-grid' as *;
@use '../../internal/callout/callout' as *;
@use '../quote/quote' as *;

@include callout;
@include quote;

@mixin callout-quote {
  * {
    box-sizing: border-box;
  }

  :host(#{$c4d-prefix}-callout-quote) {
    @extend :host(#{$c4d-prefix}-callout);
    @extend :host(#{$c4d-prefix}-callout-text);
    @include make-row;

    @include breakpoint(md) {
      @include hang;
    }

    padding-block-end: $spacing-10;

    ::slotted(#{$c4d-prefix}-callout-link-with-icon) {
      outline: transparent;
      padding-inline-start: $spacing-07;
    }

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

  :host(#{$c4d-prefix}-callout-quote[color-scheme='inverse']) {
    @extend :host(#{$c4d-prefix}-callout[color-scheme='inverse']);
    @extend :host(#{$c4d-prefix}-callout-text[color-scheme='inverse']);
  }

  :host(#{$c4d-prefix}-callout-quote[color-scheme='layer']) {
    @extend :host(#{$c4d-prefix}-callout[color-scheme='layer']);
    @extend :host(#{$c4d-prefix}-callout-text[color-scheme='layer']);
  }

  :host(#{$c4d-prefix}-callout-quote[color-scheme='purple']) {
    @extend :host(#{$c4d-prefix}-callout[color-scheme='purple']);
    @extend :host(#{$c4d-prefix}-callout-text[color-scheme='purple']);
  }
  :host(#{$c4d-prefix}-callout-quote[color-scheme='cyan']) {
    @extend :host(#{$c4d-prefix}-callout[color-scheme='cyan']);
    @extend :host(#{$c4d-prefix}-callout-text[color-scheme='cyan']);
  }

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

    display: inline-block;
    a.#{$prefix}--link-with-icon.#{$prefix}--link.#{$prefix}--link-with-icon__icon-right {
      color: $link-primary;

      &:hover {
        color: $link-primary-hover;
      }

      &:active {
        color: $link-primary;
      }
    }
  }

  :host(#{$c4d-prefix}-callout-link-with-icon[color-scheme='inverse']) {
    a.#{$prefix}--link-with-icon.#{$prefix}--link.#{$prefix}--link-with-icon__icon-right {
      color: $link-inverse;
      outline-color: $focus-inverse;

      &:hover {
        // @carbon/styles has no hover color for $link-inverse.
        color: $link-inverse;
      }

      &:active {
        color: $link-inverse;
      }
    }
  }

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

  :host(#{$c4d-prefix}-callout-quote[appearance='card']) {
    @include breakpoint-down(md) {
      padding-block-end: 0;

      div.cds--quote__source {
        margin-block: 1rem -1rem;
        margin-inline-start: -2rem;
      }

      div.cds--quote__footer {
        margin-inline-start: -2rem;

        /* stylelint-disable-next-line */
        > c4d-hr {
          /* stylelint-disable-next-line */
          margin-right: -0.1rem;
          margin-inline-end: 2rem;
        }
      }

      .cds--quote__wrapper > blockquote > .cds--quote__source,
      .cds--quote__wrapper > blockquote > .cds--quote__footer {
        display: block;
      }

      .cds--quote__wrapper .cds--quote__source,
      .cds--quote__wrapper .cds--quote__footer {
        display: none;
      }
    }

    @include breakpoint-up(md) {
      .cds--quote__wrapper > blockquote > .cds--quote__source,
      .cds--quote__wrapper > blockquote > .cds--quote__footer {
        display: none;
      }

      .cds--quote__wrapper .cds--quote__source,
      .cds--quote__wrapper .cds--quote__footer {
        display: block;
      }
    }
  }
}