@use "../kit-deps" as *;
@use "typography" as *;

.radio {
	display: inline-flex;
	flex-direction: row;
	gap: $space-sm;
	align-items: center;
	cursor: pointer;

	input[type="radio"] {
		display: none;
	}

	.radio-control {
		width: $control-choice-size;
		height: $control-choice-size;
		border-radius: 100%;
		border: $border-width-choice solid $color-text-light;
		background: $surface-panel-muted;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		transition-duration: $motion-base;
		transition-property: border-color, background;
	}

	.radio-control::before {
		content: "";
		display: block;
		width: 10px;
		height: 10px;
		border-radius: 100%;
		background: $color-primary;
		transform: scale(0);
		transition-duration: $motion-base;
		transition-property: transform, background;
	}

	@include hover_touch {
		.radio-control {
			background: $color-grey;
		}
	}

	input[type="radio"]:checked:not(:disabled) + .radio-control {
		background: rgba($color-primary, 0.18);
	}

	input[type="radio"]:checked + .radio-control::before {
		transform: scale(1);
	}

	input[type="radio"]:disabled + .radio-control {
		border-color: $color-grey;
		background: rgba($color-grey, 0.12);
		opacity: 0.5;
	}

	input[type="radio"]:disabled:checked + .radio-control::before {
		background: $color-grey;
	}

	input[type="radio"]:focus-visible + .radio-control {
		@include focus_ring;
	}

	.radio-label {
		font-size: $font-size-base;
	}
}

.radio-group {
	display: flex;
	flex-wrap: wrap;
	gap: $space-3;
	align-items: center;
}


.switch {
	display: inline-flex;
	flex-direction: row;
	gap: $space-sm;
	align-items: center;
	cursor: pointer;

	input[type="checkbox"] {
		display: none;
	}

	.switch-control {
		height: $control-switch-height;
		width: $control-switch-width;
		border: $border-width-base solid $color-primary;
		position: relative;
		background: transparent;
		transition-duration: $motion-base;
		transition-property: border-color, background;
		display: block;
	}

	.switch-control:before {
		content: "";
		display: block;
		height: $control-switch-knob;
		width: $control-switch-knob;
		background: $color-primary;
		position: absolute;
		left: -$space-1;
		top: -$space-1;
		transition-duration: $motion-base;
		transition-property: left, background;
	}

	@include hover_touch {
		.switch-control {
			background: $color-grey;
		}
	}

	input[type="checkbox"]:checked:not(:disabled) + .switch-control {
		background: $color-secondary;
		border-color: $color-secondary;
	}

	input[type="checkbox"]:checked + .switch-control:before {
		left: $control-switch-width - $control-switch-knob + $space-1;
	}

	input[type="checkbox"]:disabled + .switch-control {
		border-color: $color-grey;
	}

	input[type="checkbox"]:focus-visible + .switch-control {
		@include focus_ring;
	}

	input[type="checkbox"]:disabled + .switch-control:before {
		background: $color-grey;
	}
}

.checkbox {
	display: inline-flex;
	flex-direction: row;
	gap: $space-sm;
	align-items: center;
	cursor: pointer;

	input[type="checkbox"] {
		display: none;
	}

	.checkbox-control {
		width: $control-choice-size;
		height: $control-choice-size;
		border: $border-width-base solid $color-text-light;
		border-bottom-width: $border-width-accent;
		background: $surface-panel-muted;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		transition-duration: $motion-base;
		transition-property: border-color, background;
	}

	.checkbox-control::before {
		content: "";
		display: block;
		width: 10px;
		height: 5px;
		border-left: 2px solid $color-text-light;
		border-bottom: 2px solid $color-text-light;
		transform: rotate(-45deg) scale(0);
		opacity: 0;
		margin-top: -2px;
		transition-duration: $motion-base;
		transition-property: transform, opacity, border-color;
	}

	@include hover_touch {
		.checkbox-control {
			background: $color-grey;
		}
	}

	input[type="checkbox"]:checked:not(:disabled) + .checkbox-control {
		background: rgba($color-primary, 0.18);
	}

	input[type="checkbox"]:checked + .checkbox-control::before {
		transform: rotate(-45deg) scale(1);
		opacity: 1;
		border-color: $color-primary;
	}

	input[type="checkbox"]:disabled + .checkbox-control {
		border-color: $color-grey;
		background: rgba($color-grey, 0.12);
		opacity: 0.5;
	}

	input[type="checkbox"]:disabled:checked + .checkbox-control::before {
		border-color: $color-grey;
	}

	input[type="checkbox"]:focus-visible + .checkbox-control {
		@include focus_ring;
	}

	.checkbox-label {
		font-size: $font-size-base;
	}
}