2021-11-08 17:52:20 +01:00
|
|
|
@layer components {
|
|
|
|
.color-radio-btn {
|
|
|
|
@apply absolute opacity-0;
|
|
|
|
|
|
|
|
&:focus + label {
|
|
|
|
@apply ring-accent;
|
|
|
|
}
|
|
|
|
|
|
|
|
&:checked {
|
|
|
|
@apply ring-2 ring-contrast;
|
|
|
|
|
|
|
|
& + label {
|
|
|
|
@apply flex items-center justify-center text-2xl text-accent-contrast bg-accent-base;
|
|
|
|
|
|
|
|
&::before {
|
|
|
|
content: "✓";
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
& + label {
|
|
|
|
@apply inline-block w-16 h-16 text-sm font-semibold rounded-full cursor-pointer border-contrast bg-accent-base text-accent-contrast border-3;
|
2023-06-08 16:42:32 +02:00
|
|
|
|
2021-11-08 17:52:20 +01:00
|
|
|
color: hsl(var(--color-text-muted));
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|