.kit-filter-details {
	width: 602px;
	background-color: #ffffff;
	border: 1px solid #c8d8e2;
	outline: none;
	box-sizing: border-box;
	font-family: "PT Sans", sans-serif;
	color: #000000;

	cursor: default;

	&_editor {
		position: absolute;
		z-index: 10;
	}

	&_top {
		top: 100%;
	}

	&_horizontal {
		&_center {
			left: 50%;
			transform: translateX(-50%);
		}

		&_right {
			right: 0;
			left: auto;
		}
	}

	.kit-filtration-condition & {
		top: calc(100% - 5px);
		left: 0;
	}
}

.kit-filter-details__title {
	display: flex;
	align-items: center;
	height: 46px;
	margin: 0;
	padding-left: 26px;
	background-color: #fafaf7;
	border-bottom: 1px solid #c8d8e2;
	box-sizing: border-box;
	font-size: 21px;
	line-height: 23px;
	font-weight: 400;
	letter-spacing: 0.5px;
}

.kit-filter-details__editor-wrapper {
	padding: 15px 25px;
	background-color: #ffffff;
	border-bottom: 1px solid #eeeeee;
	border-top-right-radius: 2px;
	box-sizing: border-box;
	font-size: 14px;
}

.kit-filter-details__help-wrapper-text {
	position: relative;
	padding: 24px 24px 0;
	box-sizing: border-box;
}

.kit-filter-details__helper {
	max-height: 74px;
	overflow: hidden;
	transition: max-height 0.15s ease-in-out;

	&_extended {
		height: 100%;
		max-height: 300px;
		overflow: auto;
		animation: extended 0.15s ease 0.15s forwards;
	}

	.kit-filter-details_menu &_extended {
		max-height: 423px;
	}
}

.kit-filter-details__show-btn {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 47px;
	padding: 0;
	background: none;
	border: 0;
	outline: none;
	box-sizing: border-box;
	cursor: pointer;

	&::before {
		content: "";
		position: absolute;
		bottom: 100%;
		left: 0;
		display: block;
		width: 100%;
		height: calc(100% - 10px);
		background-image: linear-gradient(
			to bottom,
			rgba(255, 255, 255, 0),
			#ffffff
		);
	}

	&_extended {
		transform: rotate(180deg);

		&::before {
			display: none;
		}
	}

	&_no-extended {
		visibility: hidden;
	}
}

.kit-filter-details__close {
	position: absolute;
	top: 12px;
	right: 9px;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0;
	background: none;
	border: none;
	outline: none;
	color: #707070;
	transition: color 0.15s ease-in-out;
	cursor: pointer;
}

@keyframes extended {
	from {
		overflow: hidden;
	}

	to {
		overflow: auto;
	}
}