@import './theme/default';
@import './theme/font';
@import './theme/timing-functions';

@mixin collapse-border($pos) {
  @include theme-color(#{border-#{$pos}-color}, stroke, 6);
  border-#{$pos}-width: 1px;
  border-#{$pos}-style: solid;
}

$content-padding-h: 36px;

.zent-collapse {
  box-sizing: border-box;
  overflow: hidden;

  &--has-border {
    @include collapse-border(top);
    @include collapse-border(bottom);

    .zent-collapse-panel__title {
      @include collapse-border(left);
      @include collapse-border(right);
      @include collapse-border(bottom);
    }

    .zent-collapse-panel__content-box {
      padding: 0 $content-padding-h + 1px; // Add 1px border
      @include collapse-border(bottom);
    }
  }

  &--no-border {
    .zent-collapse-panel {
      @include collapse-border(bottom);

      &__content {
        padding: 4px 0 16px 0;
      }
    }
  }
}

.zent-collapse-panel {
  box-sizing: border-box;

  &__title {
    @include font-normal;
    @include theme-color(color, stroke, 1);
    padding: 14px 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;

    &--bg-default {
      @include theme-color(background-color, stroke, 8);
    }

    &--bg-none {
      @include theme-color(background-color, stroke, 9);
    }

    &__content {
      display: flex;
      font-weight: $font-weight-medium;
    }
  }

  &__content-box {
    @include font-normal;
    @include theme-color(background-color, stroke, 9);

    padding: 0 $content-padding-h;
    overflow: hidden;
    box-sizing: border-box;
  }

  &__content_box--show-background {
    @include theme-color(background-color, stroke, 8);

    .zent-collapse-panel__content {
      padding: 10px 0;
    }
  }

  &__content {
    @include theme-color(color, stroke, 1);
    padding: 16px 0;
  }

  &__arrow {
    @include theme-color(fill, stroke, 1);
    font-size: 20px;
    margin-right: 8px;
    transform: rotate(0deg);
    transform-origin: center;
    transition: transform 100ms $timing-fn-linear;
  }

  &--active {
    .zent-collapse-panel__content-box {
      opacity: 1;
    }
  }

  &--inactive {
    .zent-collapse-panel__arrow {
      transform: rotate(-90deg);
    }

    .zent-collapse-panel__content-box {
      opacity: 0;
    }
  }

  &--disabled {
    .zent-collapse-panel__arrow {
      @include theme-color(fill, stroke, 4);
    }

    .zent-collapse-panel__title {
      @include theme-color(color, stroke, 4);
      cursor: not-allowed;
    }
  }

  &--animating {
    user-select: none;
  }
}