@import '../helper/all';
@import 'config';

.#{$prefix}switch {
	@keyframes checkbox-animate {
		0% {
			transform: scale(0.85);
		}

		100% {
			transform: scale(1);
		}
	}

	@keyframes checkbox-int-animate {
		0% {
			transform: scale(0.85);
		}

		100% {
			transform: scale(1);
		}
	}

	display: inline-flex;

	input[type='checkbox'],
	input[type='radio'] {
		--handleoffset: 1.5rem;
		--handleoffsetcalculator: calc(var(--handleoffset) * -1);
		--handle-color: var(--hsl-white);
		--handle-opacity: 1;
		--base-color: var(--hsl-base-400);
		--base-opacity: 1;

		flex-shrink: 0;
		width: toRem(48);
		height: toRem(24);
		border-radius: 999px;
		background-color: hsl(var(--handle-color) / var(--handle-opacity));
		box-shadow: var(--handleoffsetcalculator) 0 0 2px
				hsl(var(--base-color) / var(--base-opacity)) inset,
			0 0 0 2px hsl(var(--base-color) / var(--base-opacity)) inset, 0 0;
		cursor: pointer;
		transition: all 0.16s ease-in-out;
		transition-timing-function: ease-in-out;
		transition-duration: 0.28s;
		appearance: none;

		&:checked {
			--handleoffsetcalculator: calc(var(--handleoffset));
			--handle-opacity: 1;
			--base-opacity: 1;
			--handle-color: var(--hsl-white);
			--base-color: var(--hsl-primary);
			--border-color: var(--hsl-primary);
		}

		&[disabled] {
			opacity: 0.7;
			cursor: not-allowed;
		}
	}

	label {
		font-weight: 500;
		font-size: toRem(15);
		cursor: pointer;
		user-select: none;
	}
}