//
// 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--button {
    margin-left: -0.2em;
    margin-right: 0.5em;
    transform: rotate(-90deg);

    transition: transform 0.1s ease-in-out;
    &__expanded {
      transform: rotate(0deg);
    }
  }

  .szh-accordion {
    @include reset;
    @include font-family("sans");
    width: 100%;
    border-bottom: 1px solid $border-strong;
    &__item {
      border-top: 1px solid $border-strong;

      &-btn {
        cursor: pointer;
        display: flex;
        align-items: center;
        width: 100%;
        margin: 0;
        padding: 1rem;
        font-size: 1rem;
        font-weight: 400;
        text-align: left;
        font-family: inherit;
        color: $action-default-fill-primary-default;
        background-color: transparent;
        border: none;
        &:hover {
          background-color: $layer-primary;
        }
      }

      &-content {
        transition: height 0.2s ease-in-out;
      }

      &-panel {
        padding: 1rem;
      }

      &--expanded {
        .szh-accordion__item-btn {
          background-color: #e7e7e7;
        }
        .chevron-down {
          transform: rotate(180deg);
        }
      }
    }
  }

  .#{$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;
    }
  }
}