@use '../variables' as *;

.#{$prefix}radio {
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: var(--#{$prefix}radio-gap);
	-webkit-tap-highlight-color: transparent;

	&--disabled {
		opacity: 0.6;
		pointer-events: none;
	}

	&--read-only {
		pointer-events: none;
	}

	&__control {
		position: relative;
		width: var(--#{$prefix}radio-control-width);
		height: var(--#{$prefix}radio-control-height);
		border-width: var(--#{$prefix}radio-control-border-width);
		border-style: var(--#{$prefix}radio-control-border-style);
		border-color: var(--#{$prefix}radio-control-border-color);
		border-radius: var(--#{$prefix}radio-control-border-radius);
		color: var(--#{$prefix}radio-control-color);
		display: flex;
		justify-content: center;
		align-items: center;
		transition:
			color 0.05s ease-in-out 0.025s,
			border-color 0.05s ease-in-out 0.025s;
		overflow: hidden;
	}

	&--before &__control {
		order: 2;
	}

	&--before &__label {
		order: 1;
	}

	&--checked &__control {
		border-color: var(--#{$prefix}_checked-radio-control-border-color, var(--#{$prefix}radio-control-border-color));
		color: var(--#{$prefix}_checked-radio-control-color, var(--#{$prefix}radio-control-color));
	}

	&--focus &__control {
		box-shadow: var(--#{$prefix}_focus-radio-control-box-shadow);
	}

	&__tap {
		position: absolute;
		inset: 0px;
		opacity: 0;
		border-radius: inherit;
		background-color: var(--#{$prefix}radio-tap-background);
		transform: scale(0);
		transition:
			opacity 0.05s ease-in-out 0.025s,
			transform 0.05s ease-in-out 0.025s;
	}

	&--checked &__tap {
		opacity: 1;
		transform: scale(1.5);
	}

	.#{$prefix}icon {
		opacity: 1;
		transform: scale(0);
		transition:
			opacity 0.05s ease-in-out 0.025s,
			transform 0.05s ease-in-out 0.025s;
	}

	&--checked .#{$prefix}icon {
		opacity: 1;
		transform: scale(1);
	}

	&-group {
		display: flex;
		flex-wrap: wrap;
		gap: var(--#{$prefix}radio-group-gap);

		&--row {
			flex-direction: row;
			align-items: center;
		}

		&--col {
			flex-direction: column;
		}

		&--start {
			justify-content: flex-start;
		}

		&--center {
			justify-content: center;
		}

		&--end {
			justify-content: flex-end;
		}

		&--stretch .#{$prefix}radio {
			flex-grow: 1;
		}
	}

	input {
		position: absolute;
		width: 0;
		height: 0;
		opacity: 0;
	}

	&__label {
		font-size: var(--#{$prefix}radio-label-font-size);
		color: var(--#{$prefix}radio-label-color);
	}
}

// ── Colores ──────────────────────────────────────────────────────────────────

$_radio-colors: (primary, secondary, success, info, warning, danger);

@each $color in $_radio-colors {
	.#{$prefix}radio--#{$color} {
		--#{$prefix}_checked-radio-control-border-color: var(--#{$prefix}#{$color}-color);
		--#{$prefix}radio-tap-background: var(--#{$prefix}#{$color}-color);
	}
}