@use '@talend/design-tokens/lib/tokens' as tokens;

.switch {
	.container {
		position: relative;
		display: inline-flex;
		background: tokens.$coral-color-neutral-background-strong;
		border-radius: 6.25rem;
		box-shadow: inset 0 0.0625rem 0.1875rem 0 rgba(0, 0, 0, 0.25);
		overflow: hidden;

		&:hover .switchIndicator em {
			background-color: tokens.$coral-color-accent-background-active;
		}

		> .btn {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: space-around;
			margin: 0;
			padding: 0 0.625rem;
			color: tokens.$coral-color-neutral-text;
			font: tokens.$coral-paragraph-s;
			opacity: tokens.$coral-opacity-m;
			user-select: none;
			cursor: pointer;
			background: none;
			border: none;
			z-index: tokens.$coral-elevation-layer-interactive-front;

			&[aria-checked='true'] {
				color: tokens.$coral-color-accent-text-weak;
				opacity: 1;
			}

			&[aria-checked] ~ .switchIndicator {
				visibility: hidden;
			}

			&[aria-checked='true'] ~ .switchIndicator {
				visibility: visible;
			}
		}
	}

	.switchIndicator {
		position: absolute;
		top: 0;
		left: 0;
		width: 0;
		bottom: 0;
		z-index: tokens.$coral-elevation-layer-standard-front;

		&[data-animated='true'] {
			transition: tokens.$coral-transition-fast;
		}
	}

	.switchIndicator em {
		position: absolute;
		top: 0.125rem;
		right: 0.125rem;
		bottom: 0.125rem;
		left: 0.125rem;
		transition: background 0.3s;
		background: tokens.$coral-color-accent-background-strong;
		border-radius: 100px;
	}

	&.readOnly div .btn[aria-checked] {
		transition: color tokens.$coral-transition-normal;
	}

	&.disabled div {
		opacity: tokens.$coral-opacity-m;
	}
}