@use 'sass:map';
@use '../core/variables' as *;
@use '../functions' as *;
@use '../mixins' as *;

ul.switch {
  @include unstyled-list;
  display: flex;
  column-gap: 8px;
  background-color: HEXToRGBA(var(--#{$prefix}btn-primary-bg), 0.05);
  padding: 4px;
  border-radius: 50px;

  > li > input[type='radio'] {
    position: absolute;
    opacity: 0;

    ~ label {
      @include button-and-tag;
      padding: 8px 16px;
      font-family: $dm-sans;
      font-weight: 500;
      font-size: var(--#{$prefix}font-size-sm);
      height: 100%;
    }

    &:hover ~ label,
    &:focus-visible ~ label {
      background-color: HEXToRGBA(var(--#{$prefix}primary), 0.05);
      color: var(--#{$prefix}primary);
    }

    &:focus-visible ~ label {
      outline: 3px solid var(--#{$prefix}primary);
    }

    &:checked {
      ~ label {
        background-color: var(--#{$prefix}btn-primary-bg);
        color: var(--#{$prefix}btn-primary);
        box-shadow: var(--#{$prefix}shadow-low-elevation) HEXToRGBA($black, 0.2);
      }

      &:hover ~ label,
      &:focus-visible ~ label {
        background-color: var(--#{$prefix}primary);
      }

      &:focus-visible ~ label {
        outline: 3px solid HEXToRGBA(var(--#{$prefix}primary), 0.3);
      }
    }

    &:disabled ~ label,
    &.disabled ~ label {
      opacity: 0.33;
      pointer-events: none;
    }

    &.circle ~ label {
      border-radius: 50%;
      width: 34px;
      height: 34px;
      padding: 8px;
    }
  }

  @media (width >= map.get($grid-breakpoints, md)) {
    > li > input[type='radio'] {
      ~ label {
        padding: 4px 12px;
      }

      &.circle ~ label {
        width: 26px;
        height: 26px;
        padding: 4px;
      }
    }
  }
}