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

.lucid-Tag {
	display: inline-flex;
	margin: @size-XXS @size-XXS 0 0;

	&.lucid-Tag-leaf {
		min-height: @size-tag;
	}

	.lucid-Tag-inner {
		border-radius: @size-borderRadius;
		background: @color-lightGray;
		border: 1px solid @color-gray;
		font-weight: bold;
		font-size: @size-font;
		color: @color-textColor;
		width: 100%; // fix for IE 11 bug flex wrapping bug

		.lucid-Tag-inner-content {
			margin: 0 @size-XS;
			padding: @size-XXS 0;
			display: flex;
			align-items: center;

			.lucid-Tag-remove {
				margin-left: auto;
				padding-left: @size-XS;
				display: flex;
				align-items: center;

				.lucid-Tag-remove-button {
					fill: fade(@color-darkGray, 50%);
				}

				&:hover {
					.lucid-Tag-remove-button {
						fill: @color-darkGray;
					}
				}
			}
		}

		.lucid-Tag-subgroup {
			display: flex;
			flex-wrap: wrap;
			padding: 0 @size-XXS @size-XS @size-XS;
		}

		.lucid-Tag-leaf& {
			border-radius: 3px;
			border-color: @featured-color-primary-borderColorMedium;
			background: @color-white;
			font-size: @size-standard;
			font-weight: normal;
			color: @color-black;

			.lucid-Tag-inner-content {
				height: 100%;

				.lucid-Tag-remove {
					.lucid-Tag-remove-button {
						fill: @color-mediumGray;
					}

					&:hover {
						.lucid-Tag-remove-button {
							fill: @color-darkGray;
						}
					}
				}
			}
		}
	}
}