@include body-class(true) {

	.sui-box-body {

		// ELEMENT: Row
		.sui-box-settings-row {
			display: flex;
			position: relative;
			margin-bottom: $sui-gutter;
			padding-bottom: $sui-gutter;
			border-bottom: 1px solid palette(silver, soft);

			[class*="sui-box-settings-col-"] {

				+ div {

					@include media(max-width, md) {
						padding-top: $sui-gutter-md;
					}

					@include media(min-width, md) {
						margin-left: $sui-gutter;
					}
				}
			}

			&:last-child {
				margin-bottom: 0;
				padding-bottom: 0;
				border-bottom-width: 0;
			}

			// STATUS: Disable
			&.sui-disabled {
				opacity: 0.5;
				pointer-events: none;
				background-color: rgba(242, 242, 242, 0.5);
			}

			// VARIATION: Flushed
			&.sui-flushed {
				margin-right: -#{$sui-gutter-md};
				margin-left: -#{$sui-gutter-md};
				padding-right: $sui-gutter-md;
				padding-left: $sui-gutter-md;

				@include media(min-width, md) {
					margin-right: -#{$sui-gutter};
					margin-left: -#{$sui-gutter};
					padding-right: $sui-gutter;
					padding-left: $sui-gutter;
				}
			}

			@include media(max-width, md) {
				display: block;
			}
		}

		// ELEMENT: Row (Slim)
		.sui-box-settings-slim-row {
			display: flex;
			position: relative;
			margin-bottom: $sui-gutter-md;

			[class*="sui-box-settings-col-"] {

				+ div {

					@include media(max-width, md) {
						padding-top: $sui-gutter-md;
					}

					@include media(min-width, md) {
						margin-left: $sui-gutter;
					}
				}
			}

			.sui-settings-label {

				&:only-child {

					@include media(min-width, md) {
						margin: 5px 0;
						line-height: 30px;
					}
				}
			}

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

			@include media(max-width, md) {
				display: block;
			}
		}

		// ELEMENT: Fixed width content
		.sui-box-settings-col-1 {
			max-width: 200px;
			flex: 0 1 200px;

			.sui-settings-label {
				color: palette(gray, dark);
			}

			@include media(max-width, md) {
				max-width: 100%;
			}
		}

		// ELEMENT: Adjustable content
		.sui-box-settings-col-2 {

			@include media(min-width, md) {
				min-width: 0;
				flex: 1;
			}
		}

		// ELEMENT: Label
		.sui-settings-label {
			display: block;
			margin: 0 0 5px;
			padding: 0;
			border: 0;
			color: palette(gray, default);
			font: 500 15px/22px $font;
			letter-spacing: $font--letter-spacing;

			&:last-child {
				margin: 0;
			}

			&.sui-dark {
				color: palette(gray, dark);
			}

			&-with-tag {
				@extend .sui-settings-label;
				display: flex;
				align-items: flex-start;

				.sui-tag {
					margin-top: -2px;
					margin-left: 10px;

					&.sui-tag-sm {
						margin-top: 4px;
					}

					&.sui-tag-pro,
					&.sui-tag-beta {
						margin-top: 5px;
					}
				}
			}
		}

		// Element: Description
		.sui-description {

			+ .sui-settings-box {
				margin-top: 10px;
			}
		}

		// FIX: Upsell
		&.sui-upsell-items {

			.sui-box-settings-row {
				margin: 0;
				padding-top: #{$sui-gutter-md + 1px};
				padding-right: $sui-gutter-md;
				padding-left: $sui-gutter-md;
				border-bottom: none;

				&:after {
					content: '';
					height: 1px;
					clear: both;
					display: block;
					position: absolute;
					right: 0;
					bottom: 0;
					left: 0;
					background-color: palette(silver, soft);
				}

				&:last-child,
				&:last-of-type {
					padding-bottom: 30px;

					&:after {
						content: unset;
					}

					@include media(max-width, md) {
						padding-top: $sui-gutter-md;
					}
				}

				@include media(min-width, md) {
					padding-top: #{$sui-gutter + 1px};
					padding-right: $sui-gutter;
					padding-left: $sui-gutter;
				}
			}
		}
	}
}

@include body-class($wrap: true, $rtl: true) {

	.sui-box-settings-row,
	.sui-box-settings-slim-row {
	
		select:not(.sui-select):not(.sui-variables) {
			padding-right: 14px;
			padding-left: 40px;
			background-position: 14px;
		}

		[data-clipboard-target] {
			left: 15px;
			right: auto;
		}

		[class*=sui-box-settings-col-] + div {

			@include media(min-width, md) {
				margin-left: 0;
				margin-right: $sui-gutter;
			}
		}
	}

	.sui-box-header {
		.sui-actions-left {
			margin-left: auto;
			margin-right: 10px;
		}
	}
}