@import '../../base.less';

@import './_var.less';

@cell: ~'@{prefix}-cell';

// collapse

.@{prefix}-collapse {
  position: relative;

  &--card {
    margin: 0 16px;
    border-radius: @radius-large;
    overflow: hidden;
  }
}

// collapse panel

.@{prefix}-collapse-panel {
  .border(bottom, @collapse-border-color);

  background-color: @collapse-panel-bg-color;
  overflow: hidden;

  &--top {
    display: flex;
    flex-direction: column-reverse;
  }

  &__header {
    position: relative;
    color: @collapse-header-text-color;

    &--top {
      .border(top, @collapse-border-color);
    }

    &--bottom {
      .border(bottom, @collapse-border-color);
    }

    &::after {
      display: none;
      left: 16px;
    }

    &--expanded {
      &::after {
        display: block;
      }
    }

    .@{cell}__title {
      font: @collapse-title-font;
    }

    .@{cell}__note {
      font: @collapse-extra-font;
    }

    .@{cell}__right-icon {
      color: @collapse-icon-color;
    }
  }

  &--disabled {
    pointer-events: none;

    .@{cell}__title,
    .@{cell}__note,
    .@{cell}__right-icon,
    .@{cell}__title-text {
      color: @collapse-header-text-disabled-color;
    }
  }

  &__body {
    display: grid;
    transition: grid-template-rows ease 240ms;
  }

  &__inner {
    overflow: hidden;
  }

  &__content {
    color: @collapse-content-text-color;
    font: @collapse-content-font;
    padding: @collapse-content-padding;
  }
}