//
// Copyright IBM Corp. 2016, 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.
//

@import '../../globals/scss/vars';
@import '../../globals/scss/helper-mixins';
@import '../../globals/scss/layout';
@import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
@import '../../globals/scss/css--reset';
@import 'keyframes';

/// Accordion styles
/// @access private
/// @group accordion
@mixin accordion {
  .#{$prefix}--accordion {
    @include reset;

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

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

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

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

    position: relative;
    display: flex;
    width: 100%;
    min-height: rem(40px);
    flex-direction: $accordion-flex-direction;
    align-items: flex-start;
    justify-content: $accordion-justify-content;
    padding: rem(10px) 0;
    margin: 0;
    color: $text-01;
    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: $hover-ui;
    }

    &:focus {
      outline: none;
    }

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

  // Size styles
  // TODO V11: Remove xl selector
  .#{$prefix}--accordion--xl .#{$prefix}--accordion__heading,
  .#{$prefix}--accordion--lg .#{$prefix}--accordion__heading {
    min-height: rem(48px);
  }

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

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

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

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

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

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

  .#{$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: $accordion-arrow-margin;
    fill: $ui-05;
    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: $accordion-title-margin;
    text-align: left;
  }

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

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

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

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

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

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

  .#{$prefix}--accordion--start .#{$prefix}--accordion__title {
    margin-right: $carbon--spacing-05;
  }

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

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

  .#{$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: $carbon--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: $ui-05;
      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: $ui-05;
    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');
  }
}

@include exports('accordion') {
  @include accordion;
}