.radio {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  gap: 0.5rem;
}

.radio__input {
  display: none !important;
}

.radio__box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  flex-shrink: 0;

  background: linear-gradient(
    to bottom,
    light-dark(white, var(--color-gray-800)) 0%,
    light-dark(#f8f9fa, var(--color-gray-900)) 100%
  );

  border: 1px solid light-dark(var(--color-gray-300), var(--color-gray-600));

  box-shadow: 0 1px 2px -1px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3)),
    0 0 0 1px light-dark(rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0.1)) inset;
}

.radio__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: light-dark(var(--color-white), var(--color-zinc-800));
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.radio__input:checked + .radio__box {
  background: linear-gradient(
    to bottom,
    light-dark(var(--color-blue-500), var(--color-blue-400)) 0%,
    light-dark(var(--color-blue-600), var(--color-blue-500)) 100%
  );
  border-color: light-dark(var(--color-blue-500), var(--color-blue-400));

  box-shadow: 0 2px 4px -1px light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.4)),
    0 0 0 1px light-dark(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1))
      inset;
}

.radio__input:checked + .radio__box .radio__dot {
  opacity: 1;
}

.radio:hover .radio__box {
  border-color: light-dark(var(--color-gray-400), var(--color-gray-500));
  background: linear-gradient(
    to bottom,
    light-dark(#fafafa, var(--color-gray-700)) 0%,
    light-dark(#f0f0f0, var(--color-gray-800)) 100%
  );

  box-shadow: 0 2px 4px -1px light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.35)),
    0 0 0 1px light-dark(rgba(255, 255, 255, 0.9), rgba(0, 0, 0, 0.15)) inset;
}

.radio:hover .radio__input:checked + .radio__box {
  background: linear-gradient(
    to bottom,
    light-dark(var(--color-blue-600), var(--color-blue-300)) 0%,
    light-dark(var(--color-blue-700), var(--color-blue-400)) 100%
  );
  border-color: light-dark(var(--color-blue-600), var(--color-blue-300));

  box-shadow: 0 3px 6px -1px light-dark(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.45)),
    0 0 0 1px light-dark(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.15))
      inset;
}

.radio__input:focus-visible + .radio__box {
  outline: none;
  box-shadow: 0 0 0 3px
      light-dark(rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.3)),
    0 1px 2px -1px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3));
}

.radio--yellow .radio__input:checked + .radio__box {
  background: linear-gradient(
    to bottom,
    light-dark(var(--color-yellow-500), var(--color-orange-400)) 0%,
    light-dark(var(--color-yellow-600), var(--color-orange-500)) 100%
  );
  border-color: light-dark(var(--color-yellow-500), var(--color-orange-400));
}

.radio--yellow:hover .radio__input:checked + .radio__box {
  background: linear-gradient(
    to bottom,
    light-dark(var(--color-yellow-600), var(--color-orange-300)) 0%,
    light-dark(var(--color-yellow-700), var(--color-orange-400)) 100%
  );
  border-color: light-dark(var(--color-yellow-600), var(--color-orange-300));
}

.radio--yellow .radio__input:focus-visible + .radio__box {
  box-shadow: 0 0 0 3px
      light-dark(rgba(234, 179, 8, 0.2), rgba(251, 191, 36, 0.3)),
    0 1px 2px -1px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3));
}