//
// @license
//
// Copyright IBM Corp. 2020, 2026
//
// 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/motion' as *;
@use '@carbon/styles/scss/spacing' as *;
@use '@carbon/styles/scss/type' as *;
@use '@carbon/styles/scss/components/button' as *;
@use '@carbon/ibmdotcom-styles/scss/globals/vars' as *;
@use '../../globals/imports' as *;

@mixin carousel {
  :host(#{$c4d-prefix}-carousel),
  .#{$prefix}--carousel {
    --#{$c4d-prefix}--carousel--page-size: 1;

    @include breakpoint(md) {
      --#{$c4d-prefix}--carousel--page-size: 2;
    }

    @include breakpoint(lg) {
      --#{$c4d-prefix}--carousel--page-size: 4;
    }

    [role='region'] {
      display: contents;
    }

    display: flex;

    overflow: hidden;
    flex-direction: column;
    inline-size: calc(
      100% + var(--#{$c4d-prefix}--carousel--overflow-hint-size, #{$spacing-05})
    );
    margin-inline-end: calc(
      -1 * var(--#{$c4d-prefix}--carousel--overflow-hint-size, #{$spacing-05})
    );
    padding-inline: $spacing-05
      calc(
        #{$spacing-05} + var(--#{$c4d-prefix}--carousel--overflow-hint-size, #{$spacing-05})
      );

    @include breakpoint(md) {
      padding-inline-start: 0;
    }

    ::slotted(:not([name])) {
      flex: 0 0
        calc(
          (
              100% - (var(--#{$c4d-prefix}--carousel--page-size, 1) - 1) * #{$spacing-05}
            ) / var(--#{$c4d-prefix}--carousel--page-size, 1)
        );
      block-size: auto;
      margin-inline-end: $spacing-05;
      vertical-align: middle;
    }

    ::slotted(#{$c4d-prefix}-callout-quote:not(:first-child)) {
      @include breakpoint(md) {
        margin-inline-start: 0;
      }
    }

    .#{$prefix}--carousel__scroll-container {
      position: relative;
      overflow: hidden;
      grid-area: body;
      margin-inline-end: calc(
        -1 * (#{$spacing-05} + var(--#{$c4d-prefix}--carousel--overflow-hint-size, #{$spacing-05}))
      );
    }

    .#{$prefix}--carousel__scroll-contents {
      position: relative;
      display: flex;
      // Achieves `sameHeight` effect for card group.
      // The cards must have `height:auto`.
      align-items: stretch;
      margin-inline-end: calc(
        #{$spacing-05} + var(--#{$c4d-prefix}--carousel--overflow-hint-size, #{$spacing-05})
      );
    }

    .#{$prefix}--carousel__scroll-contents--scrolling {
      transition: inset-inline-start $duration-slow-01
        motion(standard, productive);
    }

    .#{$prefix}--carousel__navigation {
      @include type-style('body-02', true);

      display: grid;
      align-items: center;
      justify-content: flex-end;
      gap: $spacing-05;

      grid-area: navigation;
      grid-template-columns: auto auto auto;
      margin-block-start: $spacing-05;
    }

    .#{$prefix}--btn.#{$prefix}--carousel__navigation__btn {
      padding: 0;
      block-size: $spacing-09;
      inline-size: $spacing-09;
      min-block-size: $spacing-09;

      svg {
        margin: auto;
      }
    }
  }

  :host(#{$c4d-prefix}-carousel[in-modal]) {
    padding: 0 0 $spacing-05;
    block-size: 100%;
    inline-size: 100%;

    @include breakpoint(md) {
      padding-block-end: 0;
    }

    .#{$prefix}--carousel__scroll-container {
      flex-grow: 1;
    }

    .#{$prefix}--carousel__scroll-contents {
      block-size: 100%;
    }
  }

  .#{$prefix}--carousel__navigation__status {
    direction: ltr;
  }
}

:host(#{$c4d-prefix}-carousel[dir='rtl']) {
  .#{$prefix}--btn.#{$c4d-prefix}--carousel__navigation__btn {
    svg {
      transform: rotate(180deg);
    }
  }
}

:host(#{$c4d-prefix}-carousel[dir='rtl'].featured-carousel) {
  nav.cds--carousel__navigation {
    //need to use 'right' to override the LTR property.
    /* stylelint-disable-next-line */
    right: calc(50% + 32px);
  }
}

:host([dir='rtl'].featured-carousel.slide-reverse) {
  nav.cds--carousel__navigation {
    //need to use 'right' to override the LTR property.
    /* stylelint-disable-next-line */
    right: 0;
  }
}

:host-context([dir='ltr']) {
  :host(.slide-reverse) {
    nav.cds--carousel__navigation {
      //need to use 'left' to override the LTR property.
      /* stylelint-disable-next-line */
      left: calc(50% - 32px);
      transform: translateX(-90%);

      @include breakpoint-down(lg) {
        //need to use 'left' to override the LTR property.
        /* stylelint-disable-next-line */
        left: auto;
        transform: none;
      }
    }
  }
}

@media print {
  :host(#{$c4d-prefix}-carousel),
  .#{$prefix}--carousel {
    --#{$c4d-prefix}--carousel--page-size: 4;

    flex-flow: row wrap;
    padding: 0;
    margin: 0;
    inline-size: 100%;
    max-inline-size: 100%;

    .#{$prefix}--carousel__scroll-container {
      overflow: visible;
      margin: 0;
    }

    .#{$prefix}--carousel__scroll-contents {
      position: initial;
      flex-wrap: wrap;
      margin: 0;
      gap: $spacing-05;
    }

    .#{$prefix}--carousel__navigation {
      display: none;
    }

    ::slotted(:not([name])) {
      margin: 0;
    }
  }
}

// AEM nav space for last carousel when hr is hidden
body[data-fullwidthtemplate='true']
  .table-of-contents
  .carousel:last-of-type:not(:has(.#{$prefix}--grid > [horizontal-ruler]))
  #{$c4d-prefix}-carousel::part(navigation) {
  margin-block-end: $spacing-06;
}