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

// banner sizes
@Banner-size-spacing-rightLeft: @size-S;
@Banner-size-spacing-topBottom: @size-standard;
@Banner-size-spacing-topBottom-small: @size-XS;
@Banner-size-borderRadius: @size-borderRadius;
@Banner-size-iconFontSize: 16px;

.lucid-Banner {
	.transition-group-animation-fade();
	.box-sizing();

	border: @border-standardBorder;
	background-color: @color-backgroundColor;
	font-size: @fontSize;
	font-family: @fontFamily;
	border-radius: @Banner-size-borderRadius;
	padding: 0 @Banner-size-spacing-rightLeft;
	display: flex;

	&.lucid-Banner-has-close {
		padding-right: @Banner-size-spacing-rightLeft;
	}

	&.lucid-Banner-has-no-roundedCorners {
		border-radius: 0;
	}

	&-close {
		align-self: flex-start;
		font-size: @Banner-size-iconFontSize;
		font-weight: bold;
		cursor: pointer;
		line-height: 1em;
		padding-top: @size-XXS;
		color: fade(@color-black, 50%);

		&:hover {
			color: @color-black;
		}
	}

	// States

	&-has-icon {
		& > .lucid-Banner-content {
			padding: @Banner-size-spacing-topBottom 0;
		}
	}

	&-icon {
		padding-top: @Banner-size-spacing-topBottom - 2px;
		margin-right: @Banner-size-spacing-rightLeft;
	}

	&-content {
		flex: 1;
		padding: @Banner-size-spacing-topBottom 0;
		line-height: 1em;

		& > p {
			line-height: 1.25em;

			&:first-of-type {
				margin-top: 0;
			}

			&:last-of-type {
				margin-bottom: 0;
			}
		}
	}

	// Types

	&-primary {
		border-color: @featured-color-primary-borderColorLite;
		background-color: @featured-color-primary-backgroundColorLight;
	}

	&-success {
		border-color: @featured-color-success-borderColorLite;
		background-color: @featured-color-success-backgroundColorLight;
	}

	&-info {
		border-color: @featured-color-info-borderColorLite;
		background-color: @featured-color-info-backgroundColorLight;
	}

	&-warning {
		border-color: @featured-color-warning-borderColorLite;
		background-color: @featured-color-warning-backgroundColorLight;
	}

	&-danger {
		border-color: @featured-color-danger-borderColorLite;
		background-color: @featured-color-danger-backgroundColorLight;
	}

	&-small &-icon {
		padding-top: @Banner-size-spacing-topBottom-small - 2px;
	}

	&-small &-content {
		padding: @Banner-size-spacing-topBottom - 6px 0;
	}
}