@use "sass:math";
@use "design";
@use "helpers";
@use "m";

$size: math.div(20, 14) * 1em;

$unselected-color: design.$neutral-40;
$selected-color: design.$color-secondary;

@mixin padded-after($padding) {
  top: $padding;
  left: $padding;
  right: $padding;
  bottom: $padding;
}

.radio,
.checkbox {
  display: block;
  position: relative;
  cursor: pointer;

  flex-shrink: 0; // Just in case

  width: $size;
  height: $size;
  border-width: 2px;
  border-style: solid;
  border-color: $unselected-color;

  background-color: design.$color-page-background;

  &::after {
    content: "";
    display: block;
    position: absolute;
    transform: scale(0);
    opacity: 0;
    transition-property: transform, opacity;
    transition-duration: 125ms;
  }

  &:disabled {
    opacity: design.$disabledOpacity;
  }

  &:checked {
    border-color: $selected-color;

    &::after {
      transform: scale(1);
      opacity: 1;
    }
  }

  &:focus-visible {
    @include m.focusRingWithSpace;
  }
}

.radio {
  border-radius: 50%;

  &::after {
    inset: 0.2em;

    border-radius: 50%;
    background-color: $selected-color;
  }
}

.checkbox {
  border-radius: 3px;

  &::after {
    @include padded-after(0.18em);

    background-image: url("data:image/svg+xml,%3Csvg width='12' height='9' viewBox='0 0 12 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.3071 1.75444L5.00381 7.05774L2.24932 4.30325' stroke='#{helpers.encode-color(#fff)}' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
  }

  &:checked {
    background-color: $selected-color;
  }
}

.checkboxSwitch {
  $height: 27px;
  $padding: 3px;
  $duration: 150ms;

  border-radius: 25% / 50%;
  height: $height;
  width: 1.75 * $height;
  border-width: $padding;
  border-style: solid;

  flex-shrink: 0;

  cursor: pointer;

  &:focus-visible {
    @include m.focusRingWithSpace;
  }

  position: relative;
  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background: design.$color-page-background;
    height: calc(#{$height} - #{2 * $padding});
    width: calc(#{$height} - #{2 * $padding});
    border-radius: 100%;
    transition: left $duration;
    box-shadow: 0 1px 2px rgba(#000, 0.25);
    will-change: left;
    backface-visibility: hidden;
  }

  transition-duration: $duration;
  transition-property: background-color, border-color;

  background-color: $unselected-color;
  border-color: $unselected-color;

  &:disabled {
    opacity: design.$disabledOpacity;
  }

  &:checked {
    background-color: $selected-color;
    border-color: $selected-color;

    &::after {
      left: calc(100% - #{$height} + #{2 * $padding});
    }
  }
}