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

.lucid-Selection {
	display: flex;
	min-height: @size-standard-height;
	font-size: @fontSize;
	font-family: @fontFamily;
	color: @color-darkGray;
	background-color: @color-white;
	border-radius: @size-borderRadius;
	border: 1px solid @featured-color-primary-borderColorLite;
	padding-left: @size-S;
	margin-bottom: @size-XS;

	&-is-small {
		min-height: @size-L;
		font-size: @size-font-L;
	}

	&-is-bold {
		.bold();
	}

	&-has-background {
		background-color: @color-backgroundColor;
	}

	// Kinds

	&-success {
		border-color: @featured-color-success-borderColorLite;
		padding-left: @size-XS;
	}

	&-danger {
		border-color: @featured-color-danger-borderColorLite;
		padding-left: @size-XS;
	}

	&-info {
		border-color: @featured-color-info-borderColorLite;
		padding-left: @size-XS;
	}

	&-warning {
		border-color: @featured-color-warning-borderColorLite;
		padding-left: @size-XS;
	}

	&-container {
		border-color: @color-borderColorLight;
	}

	// Others

	&-Icon {
		margin-top: 5px;
		margin-right: @size-XS;
	}

	&-Icon-is-small {
		margin-top: 13px;
	}

	&-label-container {
		flex: 1;
		display: flex;
	}

	&-label {
		flex: 1;
		margin: @size-XS 0;
	}

	&-label-is-small {
		margin: 13px 0;
	}

	&-close-button {
		fill: @color-mediumGray;

		&:hover {
			fill: @color-darkGray;
		}
	}

	&-content {
		flex: 1;
	}

	&-children-container {
		padding-top: 2px;

		& > .lucid-Selection {
			margin-right: @size-XS;
			margin-bottom: @size-XXS;
		}

		& > .lucid-Selection:last-of-type {
			margin-bottom: @size-S;
		}
	}
}