/* stylelint-disable selector-no-qualifying-type */
@use '@talend/bootstrap-theme/src/theme/guidelines' as *;
@use '@talend/design-tokens/lib/tokens' as tokens;

@mixin radio-toolbar-input($color, $opacity) {
	transition: 0.2s ease-out;
	color: $color;
	opacity: $opacity;
}

.tc-label-toggle {
	display: inline-flex;
	background-color: tokens.$coral-color-neutral-background-strong;
	border-radius: $padding-larger;
	margin-right: $padding-small;
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.25) inset;

	&.tc-radio-disabled {
		opacity: 0.54;

		label:hover {
			cursor: not-allowed;

			&:not(.tc-radio-selected) {
				background-color: tokens.$coral-color-neutral-background;
				color: tokens.$coral-color-neutral-text;
			}
		}

		input[type='radio'] {
			cursor: not-allowed;
		}
	}

	input[type='radio'] {
		position: fixed;
		opacity: 0;
		cursor: pointer;
	}

	label {
		background-color: tokens.$coral-color-neutral-background-strong;
		color: tokens.$coral-color-neutral-text;
		padding: 0 8px;
		border-radius: $padding-larger;
		font-weight: $font-weight-semi-bold;
		margin: 2px 0;
		cursor: pointer;

		&:hover {
			background-color: tokens.$coral-color-accent-background-strong-hover;
			color: tokens.$coral-color-neutral-text-inverted;
		}

		&:first-of-type {
			margin: 2px 0 2px 2px;
		}

		&:last-of-type {
			margin: 2px 2px 2px 0;
		}

		&.tc-radio-selected {
			@include radio-toolbar-input(tokens.$coral-color-neutral-text-inverted, 1);
			background-color: tokens.$coral-color-accent-background-strong-active;
			font-weight: $font-weight-semi-bold;
		}
	}
}