.expand-collapse {
	position: relative;

	&--with-icon {
		&::before {
			@include icon-stroke;
			color: $color-blue5;
			content: '\e956';
			font-size: 20px;
			margin-top: 3px;
			position: absolute;
		}

		.expand-collapse__content,
		.expand-collapse__btn {
			padding-left: 30px;
		}
	}

	&__content {
		overflow: hidden;
		position: relative;
		transition: height .5s ease;

		&::after {
			background-image: linear-gradient(to bottom, rgba($color-white, 0), $color-white);
			bottom: 0;
			content: '';
			height: 30px;
			left: 0;
			opacity: 1;
			position: absolute;
			transition: opacity .25s;
			width: 100%;
		}

		&--open {
			&::after {
				opacity: 0;
			}
		}
	}

	&__btn {
		@include font-primary-bold;
		background-color: transparent;
		border: 0;
		color: $color-blue5;
		cursor: pointer;
		padding: 0;
		position: relative;

		&--caret {
			&::after {
				@include icon-basic;
				color: $color-blue5;
				content: '\e905';
				margin-left: 10px;
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
			}
		}

		&:active,
		&:focus {
			outline: 0;
		}

		&--open {
			&.expand-collapse__btn--caret {
				&::after {
					content: '\e908';
				}
			}
		}
	}
}