@use 'sass:map';

@use './shared' as *;
@use './design' as *;

$collapse: () !default;
$collapse: map.merge(
  (
    header-color: inherit,
    header-color-hover: value('color-primary-base'),
    header-color-disabled: value('content-color-disabled'),
    header-bg-color: transparent,
    header-bg-color-card: value('fill-color-background'),
    header-v-padding: 8px,
    header-h-padding: 16px,
    arrow-color: value('content-color-secondary'),
    arrow-color-hover: value('color-primary-base'),
    arrow-color-disabled: value('content-color-humble'),
    content-color-disabled: value('content-color-disabled'),
    content-v-padding: 10px,
    content-h-padding: 16px,
    d-color: value('border-color-light-2'),
    divider: value('border-shape') value('collapse-d-color'),
    b-color: value('border-color-base'),
    border: value('border-shape') value('collapse-b-color'),
    radius: value('radius-base')
  ),
  $collapse
);

.#{$namespace}-collapse {
  &-vars {
    @include define-preset-values('collapse', $collapse);
  }

  $header: #{&}__header;
  $arrow: #{&}__arrow;
  $content: #{&}__content;
  $divider: value('collapse-divider');
  $radius: value('collapse-radius');

  $header-padding: value('collapse-header-v-padding') value('collapse-header-h-padding');
  $content-padding: value('collapse-content-v-padding') value('collapse-content-h-padding');

  @include basis {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    border-top: $divider;
  }

  @include inherit-color;

  @at-root {
    &__panel {
      @include basis {
        padding: 0;
        margin: 0;
        list-style: none;
        border-top: $divider;
        border-bottom: $divider;
      }

      @include inherit-color;

      &--card {
        #{$header} {
          border-radius: $radius;
        }

        #{$content} {
          padding: $content-padding;
          border-radius: 0 0 $radius $radius;
        }
      }

      &--expanded#{&}--card {
        #{$header} {
          border-bottom-color: value('collapse-d-color');
          border-radius: $radius $radius 0 0;
        }
      }

      &--ghost {
        border: 0;
      }
    }
  }

  & &__panel {
    border-top: 0;
  }

  &__arrow {
    position: absolute;
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    color: value('collapse-arrow-color');
    transition: value('transition-color'), value('transition-transform');
    transform: translate(-50%, -50%);

    @include rtl {
      transform: translate(50%, -50%);
    }
  }

  &__header {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: $header-padding;
    line-height: inherit;
    color: value('collapse-header-color');
    cursor: pointer;
    background-color: value('collapse-header-bg-color');
    border: 0;
    outline: 0;
    transition: value('transition-color');

    &:hover,
    &:focus {
      color: value('collapse-header-color-hover');

      #{$arrow} {
        color: value('collapse-arrow-color-hover');
      }
    }
  }

  $with-arrow-padding: calc(value('collapse-header-h-padding') + 20px);

  &--arrow-left,
  &__panel--arrow-left {
    #{$header} {
      padding-inline-start: $with-arrow-padding;
    }

    #{$arrow} {
      inset-inline-start: value('collapse-header-h-padding');
    }
  }

  &--arrow-right,
  &__panel--arrow-right {
    #{$header} {
      padding-inline-end: $with-arrow-padding;
    }

    #{$arrow} {
      inset-inline-start: calc(100% - value('collapse-header-h-padding'));
    }
  }

  &--arrow-none,
  &__panel--arrow-none {
    #{$arrow} {
      display: none;
    }
  }

  &__panel--expanded &__arrow {
    transform: translate(-50%, -50%) rotate(90deg);

    @include rtl {
      transform: translate(50%, -50%) rotate(90deg);
    }
  }

  &__panel--disabled &__header {
    cursor: not-allowed;

    &,
    &:hover,
    &:focus {
      color: value('collapse-header-color-disabled');

      #{$arrow} {
        color: value('collapse-arrow-color-disabled');
      }
    }
  }

  &__body {
    padding: 0 14px;
  }

  &__content {
    display: flex;
    flex-direction: column;
    padding: $content-padding;
  }

  &__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-inline-end: 4px;
  }

  &__panel--disabled &__content {
    color: value('collapse-content-color-disabled');
  }

  &--card,
  &__panel--card {
    border: value('collapse-border');
    border-radius: $radius;

    #{$header} {
      background-color: value('collapse-header-bg-color-card');
      border-bottom: value('border-shape') transparent;
    }
  }

  &--card &__panel {
    border-color: value('collapse-d-color');

    &:first-child #{$header} {
      border-radius: $radius $radius 0 0;
    }

    &:last-child {
      border-bottom: 0;

      #{$header} {
        border-radius: 0 0 $radius $radius;
      }
    }
  }

  &--card &__panel--expanded {
    #{$header} {
      border-bottom-color: value('collapse-d-color');
    }

    #{$content} {
      border-radius: 0 0 $radius $radius;
    }

    &:last-child #{$header} {
      border-radius: 0;
    }
  }

  &--ghost,
  &--ghost &__panel {
    border: 0;
  }
}