@import "mixins/mixins";
@import "common/var";

@include b(collapse) {
	background-color: $--collapse-header-fill;
	border: 1px solid $--collapse-border-color;
	border-radius: 4px;
	border-bottom: 0;
	box-sizing: border-box;
	@include border(less) {
		background-color: $--collapse-content-fill;
		border: 0;
	}
}

@include b(collapse-item) {
	border-bottom: 1px solid $--collapse-border-color;
	@include e(header) {
		position: relative;
		height: $--collapse-header-height;
		line-height: $--collapse-header-height;
		padding: $--collapse-header-padding;
		color: $--collapse-header-color;
		cursor: pointer;
		font-size: $--collapse-header-size;
		font-weight: 500;
		transition: border-bottom-color .3s;
		outline: none;
		@include e(arrow) {
			position: absolute;
			top: 0;
			left: 16px;
			margin-right: 8px;
			transition: transform .3s;
			line-height: 46px;
			font-weight: 300;
			@include when(active) {
				transform: rotate(90deg);
			}
		}
		&.focusing:focus:not(:hover) {
			color: $--color-primary;
		}
		@include when(active) {
			border-bottom-color: transparent;
		}
		@include arrow(no){
			padding-left: 16px;
		}
	}

	@include e(wrap) {
		will-change: height;
		background-color: $--collapse-content-fill;
		overflow: hidden;
		box-sizing: border-box;
		border-top: 1px solid $--collapse-border-color;
	}

	@include e(content) {
		padding: 16px;
		font-size: $--collapse-content-size;
		color: $--collapse-content-color;
		line-height: 1.769230769230769;
	}

	&:last-child {
		margin-bottom: -1px;
	}
}
.kc-collapse.border-less {
	.kc-collapse-item__wrap {
		background-color: transparent;
		border-top: 0;
		.kc-collapse-item__content {
			padding-left: 40px;
			padding-top: 4px;
		}
	}
}