/* Widgets - Button Group */
////
/// @group Widgets-Button_Group
/// Widgets - Button Group

///
.button-group {
	background-color: transparent;
	border-radius: 0;
	padding: var(--space-none);

	&-item {
		background-color: var(--color-neutral-0);
		border: var(--border-size-s) solid var(--color-primary);
		border-radius: 0;
		color: var(--color-primary);
		cursor: pointer;
		font-size: var(--font-size-s);
		font-weight: var(--font-semi-bold);
		height: 40px;
		padding: var(--space-none) var(--space-base);
		position: relative;

		&:first-child {
			border-radius: var(--border-radius-soft) var(--border-radius-none) var(--border-radius-none)
				var(--border-radius-soft);
		}

		&[disabled] {
			background-color: var(--color-neutral-0);
			border: var(--border-size-s) solid var(--color-neutral-4);
			color: var(--color-neutral-6);
			pointer-events: none;

			&.button-group-selected-item {
				background-color: var(--color-neutral-2);
				color: var(--color-neutral-6);
			}
		}

		&[disabled]:not(:first-child),
		&:not(:first-child) {
			border-left: var(--border-size-none);
		}

		&:last-child {
			border-radius: var(--border-radius-none) var(--border-radius-soft) var(--border-radius-soft)
				var(--border-radius-none);
		}

		&.button-group-selected-item {
			background-color: var(--color-primary);
			color: var(--color-neutral-0);
		}
	}

	// Fix validation message position
	&.not-valid {
		position: relative;

		.validation-message {
			bottom: -12px;
			position: relative;
		}
	}
}

/* Button Group when used inside Header Content Placeholder */
///
.layout-native {
	.header-top-content {
		.button-group-item {
			background-color: var(--header-color);
			border: 0;
			border-bottom: var(--border-size-m) solid transparent;
			color: var(--color-neutral-8);

			&:last-child {
				border-radius: 0;
			}

			&.button-group-selected-item {
				border-bottom: var(--border-size-m) solid var(--color-primary);
				color: var(--color-neutral-10);
			}

			&[disabled] {
				color: var(--color-neutral-6);

				&.button-group-selected-item {
					border-bottom: var(--border-size-m) solid var(--color-neutral-6);
				}
			}
		}
	}
}

// Responsive --------------------------------------------------------------------
///
.tablet,
.phone {
	.button-group-item {
		height: 48px;
	}
}

// IsRTL -------------------------------------------------------------------------
///
.is-rtl {
	.button-group-item {
		&:first-child {
			border-radius: var(--border-radius-none) var(--border-radius-soft) var(--border-radius-soft)
				var(--border-radius-none);
		}

		&:not(:first-child) {
			border-left: var(--border-size-s) solid var(--color-primary);
			border-right: var(--border-size-none);

			&[disabled] {
				border-left: var(--border-size-s) solid var(--color-neutral-4);
			}
		}

		&:last-child {
			border-radius: var(--border-radius-soft) var(--border-radius-none) var(--border-radius-none)
				var(--border-radius-soft);
		}
	}
}

// Accessinility -----------------------------------------------------------------
///
.has-accessible-features {
	.button-group-item {
		&:focus {
			box-shadow: none;

			&:before {
				bottom: -1px;
				box-shadow: 0 0 0 3px var(--color-focus-outer);
				content: '';
				left: -1px;
				position: absolute;
				right: -1px;
				top: -1px;
				z-index: var(--layer-global-screen);
			}
		}
	}
}

// OS HighContrast Enabled -------------------------------------------------------
///
.os-high-contrast {
	.button-group-item {
		&.button-group-selected-item:before {
			content: '';
			display: block;
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			border: var(--border-size-l) solid var(--color-primary);
		}
	}
}