@import (reference) '../../styles/variables.less';
@import (reference) '../../styles/mixins.less';

.lucid-Expander {
	&-icon {
		.box-sizing();

		width: @size-expander-button;
		height: @size-expander-button;
		align-items: center;
		display: flex;
		justify-content: center;
		margin-right: @size-XS;
	}

	&-header {
		align-items: center;
		color: @color-darkGray;
		cursor: pointer;
		display: flex;
		font-size: @fontSize;
		font-family: @fontFamily;
		justify-content: flex-start;

		&:hover {
			> .lucid-Expander-icon {
				.gradient-animation(@featured-color-default-gradientStartColor, @featured-color-default-gradientEndColor);
				.box-sizing();

				border: solid 1px @featured-color-default-borderColor;
				border-radius: @size-borderRadius;
				outline: none;

				.lucid-ChevronIcon {
					fill: @color-darkGray;
				}
			}

			> .lucid-Expander-text {
				color: @color-linkColorHover;

				// `text-decoration `does not inherit when you're using `position:
				// absolute` as per the spec
				> span {
					text-decoration: underline;
				}
			}
		}
	}

	&-text {
		.transition-group-animation-fade(@timing-animation-hover);

		color: @color-linkColor;
		height: @size-expander-button;
		position: relative;

		// Since we have two elements in the dom during the transition from one
		// label to another, we want the element that's leaving to appear "over
		// the top" of the label that coming in.
		&-leave {
			position: absolute;
			top: 0;
			left: 0;
		}

		> * {
			line-height: @size-expander-button;
			white-space: nowrap;
		}
	}

	&-content {
		overflow: hidden;
	}

	// kind
	&-kind-highlighted {
		.lucid-Expander-header {
			background: @color-backgroundColor;
			border: @border-lightBorder;
			padding: @size-standard;
			display: flex;
			flex-direction: row-reverse;

			.lucid-Expander-text {
				font-size: @size-font-L;
				color: @color-textColor;
				font-weight: bold;
				flex: 1;
			}

			.lucid-Expander-icon {
				margin: 0;
				flex-shrink: 0;
			}

			&:hover .lucid-Expander-text > span {
				text-decoration: none;
			}
		}

		.lucid-Collapsible-content {
			padding: @size-standard;
		}
	}
}