/**
 *
 * @ai-apps/angular v2.152.0 | _accordion.scss
 *
 * Copyright 2014, 2023 IBM
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0

 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */


//
// Copyright IBM Corp. 2018, 2018
//
// 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 '../../breakpoint' as *;
@use '../../config' as *;
@use '../../motion' as *;
@use '../../theme' as *;
@use '../../spacing' as *;
@use '../../type' as *;
@use '../../utilities/button-reset';
@use '../../utilities/component-reset';
@use '../../utilities/convert';
@use '../../utilities/focus-outline' as *;
@use '../../utilities/high-contrast-mode' as *;

/// @type Value
/// @access public
/// @group accordion
$flex-direction: row-reverse !default;

/// @type Value
/// @access public
/// @group accordion
$justify-content: flex-start !default;

/// @type Value
/// @access public
/// @group accordion
$arrow-margin: 2px $spacing-05 0 0 !default;

/// @type Value
/// @access public
/// @group accordion
$title-margin: 0 0 0 $spacing-05 !default;

/// @type Value
/// @access public
/// @group accordion
$content-padding: 0 0 0 $spacing-05 !default;

@mixin accordion {
  .#{$prefix}--accordion {
    @include component-reset.reset;

    width: 100%;
    list-style: none;
  }

  .#{$prefix}--accordion__item {
    overflow: visible;
    border-top: 1px solid $border-subtle;
    transition: all $duration-fast-02 motion(standard, productive);

    &:last-child {
      border-bottom: 1px solid $border-subtle;
    }
  }

  .#{$prefix}--accordion__heading {
    @include button-reset.reset;

    position: relative;
    display: flex;
    width: 100%;
    min-height: convert.rem(40px);
    flex-direction: $flex-direction;
    align-items: flex-start;
    justify-content: $justify-content;
    padding: convert.rem(10px) 0;
    margin: 0;
    color: $text-primary;
    cursor: pointer;
    transition: background-color motion(standard, productive) $duration-fast-02;

    &:hover::before,
    &:focus::before {
      position: absolute;
      top: -1px;
      left: 0;
      width: 100%;
      height: calc(100% + 2px);
      content: '';
    }

    &:hover::before {
      background-color: $background-hover;
    }

    &:focus {
      outline: none;
    }

    &:focus::before {
      @include focus-outline('outline-compat');
    }
  }

  // Size styles
  .#{$prefix}--accordion--lg .#{$prefix}--accordion__heading {
    min-height: convert.rem(48px);
  }

  .#{$prefix}--accordion--sm .#{$prefix}--accordion__heading {
    min-height: convert.rem(32px);
    padding: convert.rem(5px) 0;
  }

  // Disabled styles
  .#{$prefix}--accordion__heading[disabled] {
    color: $text-disabled;
    cursor: not-allowed;
  }

  .#{$prefix}--accordion__heading[disabled] .#{$prefix}--accordion__arrow {
    fill: $icon-disabled;
  }

  .#{$prefix}--accordion__heading[disabled]:hover::before {
    background-color: transparent;
  }

  .#{$prefix}--accordion__item--disabled,
  .#{$prefix}--accordion__item--disabled + .#{$prefix}--accordion__item {
    border-top: 1px solid $border-disabled;
  }

  li.#{$prefix}--accordion__item--disabled:last-of-type {
    border-bottom: 1px solid $border-disabled;
  }

  .#{$prefix}--accordion__arrow {
    @include focus-outline('reset');

    width: 1rem;
    height: 1rem;
    // Without flex basis and flex shrink being set here, our icon width can go
    // <16px and cause the icon to render in the incorrect artboard size
    flex: 0 0 1rem;
    margin: $arrow-margin;
    fill: $icon-primary;
    transform: rotate(-270deg) #{'/*rtl:ignore*/'};
    transition: all $duration-fast-02 motion(standard, productive);
  }

  .#{$prefix}--accordion__title {
    @include type-style('body-long-01');

    z-index: 1;
    width: 100%;
    margin: $title-margin;
    text-align: left;
  }

  .#{$prefix}--accordion__content {
    display: none;
    padding-right: $spacing-05;
    padding-left: $spacing-05;
    // Transition property for when the accordion closes
    transition: padding motion(standard, productive) $duration-fast-02;

    // Custom breakpoints based on issue #4993
    @include breakpoint-up(480px) {
      padding-right: $spacing-09;
    }

    @include breakpoint-up(640px) {
      padding-right: 25%;
    }

    > p {
      @include type-style('body-long-01');
    }
  }

  .#{$prefix}--accordion--start .#{$prefix}--accordion__heading {
    // Reverse `$flex-direction` token:
    flex-direction: row;
  }

  .#{$prefix}--accordion--start .#{$prefix}--accordion__arrow {
    // Alters `$arrow-margin` token:
    margin: 2px 0 0 $spacing-03;
  }

  .#{$prefix}--accordion--start .#{$prefix}--accordion__content {
    margin-left: $spacing-06;
  }

  .#{$prefix}--accordion__item--collapsing .#{$prefix}--accordion__content,
  .#{$prefix}--accordion__item--expanding .#{$prefix}--accordion__content {
    display: block;
  }

  @keyframes collapse-accordion {
    0% {
      @include -content-visible;
    }
    100% {
      @include -content-hidden;
    }
  }

  @keyframes expand-accordion {
    0% {
      @include -content-hidden;
    }
    100% {
      @include -content-visible;
    }
  }

  .#{$prefix}--accordion__item--collapsing .#{$prefix}--accordion__content {
    animation: $duration-fast-02 motion(standard, productive) collapse-accordion;
  }

  .#{$prefix}--accordion__item--expanding .#{$prefix}--accordion__content {
    animation: $duration-fast-02 motion(standard, productive) expand-accordion;
  }

  .#{$prefix}--accordion__item--active {
    overflow: visible;

    .#{$prefix}--accordion__content {
      display: block;
      padding-top: $spacing-03;
      padding-bottom: $spacing-06;
      // Transition property for when the accordion opens
      transition: padding-top motion(entrance, productive) $duration-fast-02,
        padding-bottom motion(entrance, productive) $duration-fast-02;
    }

    .#{$prefix}--accordion__arrow {
      fill: $icon-primary;
      transform: rotate(-90deg) #{'/*rtl:ignore*/'};
    }
  }

  // Skeleton state
  .#{$prefix}--accordion.#{$prefix}--skeleton .#{$prefix}--accordion__heading,
  .#{$prefix}--accordion.#{$prefix}--skeleton .#{$prefix}--accordion__button {
    cursor: default;
  }

  .#{$prefix}--accordion.#{$prefix}--skeleton .#{$prefix}--accordion__arrow {
    cursor: default;
    fill: $icon-primary;
    pointer-events: none;

    &:hover,
    &:focus,
    &:active {
      border: none;
      cursor: default;
      outline: none;
    }
  }

  .#{$prefix}--accordion.#{$prefix}--skeleton
    .#{$prefix}--accordion__heading:hover::before {
    background-color: transparent;
  }

  .#{$prefix}--accordion--end.#{$prefix}--skeleton
    .#{$prefix}--accordion__arrow {
    margin-left: $spacing-05;
  }

  .#{$prefix}--skeleton
    .#{$prefix}--accordion__heading:focus
    .#{$prefix}--accordion__arrow {
    border: none;
    cursor: default;
    outline: none;
  }

  .#{$prefix}--accordion__title.#{$prefix}--skeleton__text {
    margin-bottom: 0;
  }

  // Windows HCM fix
  .#{$prefix}--accordion__arrow,
  .#{$prefix}--accordion__item--active .#{$prefix}--accordion__arrow {
    @include high-contrast-mode('icon-fill');
  }
}

@mixin -content-visible {
  height: 100%;
  opacity: 1;
  visibility: inherit;
}

@mixin -content-hidden {
  height: 0;
  opacity: 0;
  visibility: hidden;
}
