@import "../../../style/theme/default/index.less";
@import "../../../style/mixins/index.less";

@collapse-prefix-cls: ~"@{idoll-prefix}-collapse";
@collapse-header-bg: @background-color-light;
@collapse-active-bg: @background-color-base;

.collapse-close() {
  transform: rotate(0);
}
.collapse-open() {
  transform: rotate(-90deg);
}

.@{collapse-prefix-cls} {
	.reset-component;
	background-color: @collapse-header-bg;
	border-radius: @border-radius-base;
	border: @border-width-base @border-style-base @border-color-base;
	border-bottom: 0;

	& > &-item {
		border-bottom: @border-width-base @border-style-base @border-color-base;

		&:last-child {
			&,
			& > .@{collapse-prefix-cls}-header {
				border-radius: 0 0 @border-radius-base @border-radius-base
			}
		}

		> .@{collapse-prefix-cls}-header {
			line-height: 22px;
			padding: 12px 0 12px 40px;
			color: @heading-color;
			cursor: pointer;
			position: relative;
			transition: all .3s;

			.arrow {
				.iconfont-mixin();
				.collapse-close();
				font-size: @font-size-sm;
				position: absolute;
				display: inline-block;
				line-height: 46px;
				vertical-align: top;
				transition: transform 0.24s;
				top: 0;
				left: @padding-md;
				&:before {
					content: "\E92C";
				}
			}
		}
	}

	&-anim-active {
		transition: height .2s @ease-out
	}

	&-content {
		overflow: hidden;
		color: @text-color;
		padding: 0 @padding-md;
		background-color: @component-background;
		border-top: @border-width-base @border-style-base @border-color-base;

		& > &-box {
		padding-top: @padding-md;
      	padding-bottom: @padding-md;
		}

		&-inactive {
			display: none;
		}
	}

	&-item:last-child {
		> .@{collapse-prefix-cls}-content {
			border-radius: 0 0 @border-radius-base @border-radius-base;
		}
	}

	& > &-item > &-header[aria-expanded="true"] {
		.arrow {
			.collapse-open();
		}
	}

	&-borderless {
		background-color: @component-background;
		border: 0;
	}

	&-borderless > &-item {
		border-bottom: 1px solid @border-color-base;
	}

	&-borderless > &-item:last-child,
	&-borderless > &-item:last-child &-header {
		border-radius: 0;
	}

	&-borderless > &-item > &-content {
		background-color: transparent;
		border-top: 0;
	}

	&-borderless > &-item > &-content > &-content-box {
		padding-top: 4px;
	}

	& &-item-disabled > &-header {
		&,
		& > .arrow {
			cursor: not-allowed;
			color: @disabled-color;
		}
	}

}