@use "sass:math";

@include body-class(true) {

	.sui-multistrings-aria {
		@extend %sui-screen-reader-text;
	}

	.sui-multistrings-list {
		min-height: 118px;
		cursor: text;
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		margin: 0;
		padding: #{math.div($sui-gutter-md, 2) - 2px};
		border: 1px solid palette(gray, lighter);
		border-radius: $border-radius;
		background-color: #FAFAFA;
		transition: $transition;

		&, li {
			list-style: none;
		}

		li[title] {
			max-width: 100%;
			min-width: 1px;
			display: flex;
			align-items: center;
			flex: 0 0 auto;
			position: relative;
			margin: 2px;
			padding: 7px 35px 7px 27px;
			border: 0;
			border-radius: $border-radius;
			background-color: palette(gray, default);
			color: $white;
			font: 500 12px/16px $font;
			letter-spacing: -0.23px;

			[class*="sui-icon-"] {

				&:before {
					color: inherit;
				}

				&.sui-sm {
					width: 12px;
					height: 12px;
					position: absolute;
					top: 9px;
					left: 10px;

					&:before {
						display: block;
					}
				}
			}

			button {
				width: 30px;
				height: 30px;
				cursor: pointer;
				position: absolute;
				top: 0;
				right: 0;
				margin: 0;
				padding: 0;
				border: 0;
				border-radius: 0 $border-radius $border-radius 0;
				background-color: #5E5E5E;
				color: $white;
				transition: $transition;

				&:hover,
				&:focus {
					background-color: #4D4D4D;
				}
			}
		}

		li.sui-multistrings-input {
			min-width: 100px;
			flex: 1;
			margin: 2px;
			padding: 0;
			border: 0;

			input {
				width: 100%;
				max-width: 100%;
				margin: 0;
				padding: 0;
				border: 0;
				display: block;
				margin: 0;
				padding: 7px 0;
				border: 0;
				font: $form--input-font-weight #{$font--size}/#{$form--input-line-height - 7px} $font;
				letter-spacing: $font--letter-spacing;

				&,
				&:hover,
				&:focus,
				&:active {
					outline: none;
					box-shadow: none;
					background-color: transparent;
					color: $nightrider;
				}
			}
		}

		&:hover,
		&.sui-focus {
			background-color: $white;
		}
	}
}