@import "./variables.scss";
@import "~@alifd/next/lib/core/index-noreset"; // next core style
@import "~@alifd/next/lib/collapse/scss/variable";
@import "~@alifd/next/lib/collapse/scss/mixin";

//箭头在右
#{$collapse-prefix} {
  #{$collapse-prefix}-panel-expanded {
    >#{$collapse-prefix}-panel-content {
      padding-left: 36px;
      border-top: 1px $color-line1-1 solid;
    }
  }

  &.#{$css-prefix}right {
    #{$collapse-prefix}-panel-title {
      padding: $collapse-title-padding-tb calc(#{$collapse-icon-margin-r} + #{$collapse-icon-margin-l} + #{$collapse-icon-size}) $collapse-title-padding-tb $s-4;
    }

    #{$collapse-prefix}-panel-icon {
      position: absolute;
      left: initial;
      right: $b-design-collapse-icon-margin-r;
    }

    #{$collapse-prefix}-panel-expanded {
      >#{$collapse-prefix}-panel-content {
        padding: $collapse-content-padding-y $b-design-collapse-content-padding-x;
      }

      #{$collapse-prefix}-panel-title {
        background: $collapse-title-bg-color;
      }
    }
  }
}

#{$collapse-prefix} {
  &-panel-content {
    line-height: $collapse-content-line-height;
  }

  #{$collapse-prefix}-panel-icon {
    &#{$collapse-prefix}-panel-icon-expanded {
      @if (get-compiling-value($collapse-unfold-icon-content) !=get-compiling-value($icon-reset)) {
        &::before {
          content: $collapse-unfold-icon-content;
        }
      }

      @else {
        @include icon-size($collapse-icon-size, 0px, 0px, rotate(180deg));
      }
    }
  }
}

// grey背景
#{$collapse-prefix} {
  &.#{$css-prefix}grey {
    border: $collapse-border-width solid $b-design-collapse-border-color;

    #{$collapse-prefix}-panel-title {
      background: $b-design-collapse-title-bg-color;

      &:hover {
        background: $b-design-collapse-title-hover-bg-color;
        color: $collapse-title-hover-font-color;
      }
    }

    #{$collapse-prefix}-panel-content {
      background: $b-design-collapse-content-bg-color;
    }

    #{$collapse-prefix}-panel-expanded {
      #{$collapse-prefix}-panel-title {
        background: $b-design-collapse-title-bg-color;
      }
    }

    #{$collapse-prefix}-panel-disabled {
      >#{$collapse-prefix}-panel-title {
        cursor: not-allowed;
        color: $collapse-title-font-disabled-color;
        background: $b-design-collapse-title-disabled-bg-color;
      }

      &:hover {
        color: $collapse-title-font-disabled-color;
        background: $b-design-collapse-title-disabled-bg-color;
      }
    }
  }
}