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

@collapse-prefix-cls: ~"@{idoll-prefix}-collapse";
@collapse-header-bg: @table-header-color;

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

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

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

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

		> .@{collapse-prefix-cls}-header {
			line-height: @collapse-header-line-height;
			padding: @padding-sm @padding-lg;
			color: @title-color;
			cursor: pointer;
			position: relative;
			transition: all @animation-duration-slow;

			.arrow {
				.iconfont-mixin();
				.collapse-close();
				font-size: @font-size-sm;
				position: absolute;
				display: inline-block;
				line-height: @collapse-item-line-height;
				vertical-align: top;
				transition: transform @animation-duration-slow;
				top: 0;
				right: @padding-lg;
				&:before {
					content: "\E6F5";
				}
			}
		}
	}

	&-anim-active {
		transition: height @animation-duration-base @ease-out;
	}

	&-content {
		overflow: hidden;
		color: @text-color;
		padding: 0 @padding-lg;
		background-color: @collapse-color;
		border-width: 0;

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

		&-inactive {
			display: none;
			border-bottom: 0;
		}
	}

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

	& > &-item > &-header {
		background-color: @collapse-header-bg;
	}

	& > &-item > &-header[aria-expanded="true"] {
		outline-width: 0;
		border-top: 0;
		.arrow {
			.collapse-open();
		}
	}

	& > &-item > &-header:focus {
		outline-width: 0;
	}

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

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

	&-borderless > &-item >&-header {
		padding: @padding-sm 0;
		background-color: @collapse-color;
		.arrow {
			right: 0;
		}
	}

	&-borderless > &-item >&-header[aria-expanded="false"] {
		border-bottom: 0;
	}

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

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

	& &-item-disabled > &-header {
		&,
		& > .arrow {
			cursor: not-allowed;
			color: @text-color-disable;
		}
	}
	&-bgColor {
		border: none;
		.@{collapse-prefix-cls}-item {
			border-bottom: 0;
			margin-bottom: @padding-lg;
			.@{collapse-prefix-cls}-content {
				background-color: #FCFCFC;
				border-bottom: 0;
				&-box {
					border-bottom: 0;
				}	
			}
		}
		.@{collapse-prefix-cls}-item:last-child {
			.@{collapse-prefix-cls}-content {
				border-bottom: 0;
			}
		}
	}
}