@use 'sass:math';

// 24px input widget size.
$size: 1.5rem;
$marker-size: 1rem;
$px: 0.0625rem;
$marker-offset: math.div($size - $marker-size, 2) - $px;
$radio-checkbox-label-gap: theme('spacing.[2.5]');

// Both input types are very similar in appearance and layout.
@mixin radio-checkbox-base() {
  @include input-base();
  display: inline-block;
  position: relative;
  height: $size;
  width: $size;
  cursor: pointer;
  margin-inline-end: $radio-checkbox-label-gap;

  &::before {
    content: '';
    position: absolute;
    top: $marker-offset;
    inset-inline-start: $marker-offset;
    width: $marker-size;
    height: $marker-size;
  }

  &:checked::before {
    background: $color-teal;

    @media (forced-colors: active) {
      background: Highlight;
    }
  }
}

input[type='radio'] {
  @include radio-checkbox-base();
  display: inline-block;
  border-radius: theme('borderRadius.full');

  &:checked::before {
    mask-image: url('#{$images-root}icons/radio-full.svg');
  }
}

input[type='checkbox'] {
  @include radio-checkbox-base();
  border-radius: theme('borderRadius.sm');
  // Legacy alignment for checkboxes, particularly within listings.
  vertical-align: bottom;

  &:checked::before {
    mask-image: url('#{$images-root}icons/tick.svg');
  }
}