@use 'sass:color';
@use 'node_modules/attractions/_variables' as vars;
@use '../_mixins';

.checkbox {
  align-items: center;
  cursor: pointer;
  display: flex;
  font-family: vars.$font;
  position: relative;

  > input[type='checkbox'] {
    @include mixins.hide-accessible;
  }

  .selector {
    border: 0.125em solid vars.$light-contrast;
    border-radius: 0.25em;
    cursor: pointer;
    height: 1em;
    position: relative;
    width: 1em;

    &::before {
      border: 0 solid vars.$main-text;
      border-bottom-left-radius: 0.125em;
      content: '';
      height: 0;
      left: 50%;
      position: absolute;
      top: 45%;
      transform: translate(-50%, -50%) rotate(-57deg) skew(-11deg);
      transition: width 75ms;
      width: 0;
    }

    &::after {
      border-radius: 50%;
      content: '';
      height: 2.25em;
      left: 50%;
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 2.25em;
    }
  }

  &.round > .selector {
    border-radius: 50%;
    height: 1.375em;
    width: 1.375em;
  }

  :disabled + .selector {
    background-color: color.scale(vars.$light-contrast, $lightness: 45%);
    cursor: not-allowed;
  }

  :checked + .selector {
    background-color: vars.$main;
    border-color: vars.$main;

    &::before {
      border-bottom-width: 0.125em;
      border-left-width: 0.125em;
      height: 0.375em;
      width: 0.5625em;
    }
  }

  :disabled:checked + .selector {
    background-color: vars.$disabled;
    border-color: color.scale(vars.$disabled, $lightness: 4%);
  }

  &:hover {
    .selector::after {
      background-color: color.adjust(vars.$dark, $alpha: -0.95);
    }

    :checked + ::after {
      background-color: color.adjust(vars.$main, $alpha: -0.95);
    }

    :disabled + .selector::after {
      background: none;
    }
  }

  :focus + .selector::after {
    background-color: color.adjust(vars.$dark, $alpha: -0.875);
  }

  :focus:checked + ::after {
    background-color: color.adjust(vars.$main, $alpha: -0.875);
  }
}