spur-tailwind/css/components/radio-button.css

Spur web UI

$radio-button-size: 20px;
$radio-width: 6px;
$radio-height: 6px;

.radio {
  @apply relative flex;
}

.radio:hover {
  cursor: pointer;
}

.radio-text {
  @apply: block;
  padding-left: ($radio-button-size * 1.75);
  line-height: $radio-button-size;
}

.radio-text::before,
.radio-text::after {
  content: '';
}

.radio-text::before {
  @apply absolute top-0 left-0 block rounded-full border border-border-line-purple;
  width: $radio-button-size;
  height: $radio-button-size;
}

.radio-text::after {
  @apply absolute block bg-white rounded-full opacity-0;
  top: (($radio-button-size - $radio-height) / 2);
  left: (($radio-button-size - $radio-width) / 2);
  width: $radio-width;
  height: $radio-height;
  transition: background-color 150ms ease-in-out, opacity 150ms ease-in-out;
}

:checked ~ .radio-text::after {
  opacity: 1;
}

:checked ~ .radio-text::before {
  @apply bg-support-purple border-support-purple;
}

.radio-input {
  position: absolute;
  left: -999em;
}

/* Disabled checkbox */
.radio-input[disabled] {
  @apply border-dead-state-purple;
}

.radio-input[disabled] ~ .radio-text {
  @apply text-dead-state-purple;
}