@use "sass:math";

@include body-class(true) {

	.sui-ace-selectors {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: math.div($sui-gutter-md, 2);
		margin-left: -5px;

		.sui-selector {
			height: 26px;
			display: inline-flex;
			flex: 0 0 auto;
			margin: 0 0 5px 5px;
			padding: 5px 12px;
			border-radius: $border-radius;
			background-color: $ace-selector-background;
			font: 500 12px/16px $font;
			letter-spacing: $font--letter-spacing;
			transition: 0.3s ease;

			&,
			&:hover,
			&:focus,
			&:active,
			&:visited {
				border: 0;
				outline: none;
				box-shadow: none;
				color: $ace-selector-color;
			}

			&:hover,
			&:active {
				background-color: $ace-selector-background-hover;
			}
		}

		&:last-child {
			margin-bottom: 0;

			@include media(min-width, md) {
				margin-bottom: 0;
			}
		}

		@include media(min-width, md) {
			margin-bottom: math.div($sui-gutter, 2);
		}
	}

	[id^='sui-ace-editor'] {
		width: 100%;
		height: 225px;
		position: relative;
		margin: $sui-gutter-md 0;

		&:first-child {
			margin-top: 0;
		}

		&:last-child {
			margin-bottom: 0;
		}
	}
}