sparkletown/sparkle

@import "scss/constants";

$size: 32px;
$tick: 26px;
$offset: 2px;

$checkbox-transition: all 200ms $transition-function;
$checkbox-shadow-preset: inset 0 0 0 1px;

.AdminCheckbox {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  position: relative;
  margin: $spacing--xs 0;

  &:focus &__box,
  &:focus-within &__box {
    border: 1px solid var(--content--over);
  }

  &__error,
  &__subtext {
    display: block;
  }

  &__error {
    color: var(--danger--under);
  }

  &__subtext {
    margin: 0;
    padding: 0;
    color: var(--content--over-50a);
  }

  &__input {
    // NOTE: !important is necessary evil here to make the original checkbox hidden but tabbable
    display: inline !important;
    visibility: visible !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
  }

  label {
    // NOTE: this undoes another global.scss damage, remove after that one is removed
    margin-bottom: unset;
  }

  &__label {
    display: flex;
    align-items: center;

    &--before {
      margin-right: $spacing--md;
    }
  }

  &--label-above &__label {
    flex-direction: column;

    > * + * {
      margin-top: font-size--parent(0.5);
    }
  }

  &__box {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: relative;
    cursor: pointer;

    width: $size;
    min-width: $size;
    height: $size;
    min-height: $size;

    margin-right: font-size--parent(1);

    border-radius: $border-radius--max;
    box-shadow: $checkbox-shadow-preset var(--content--over-10a);
    background-color: var(--content--over-10a);

    &:hover {
      background-color: var(--content--over-20a);
      box-shadow: $checkbox-shadow-preset var(--content--over-40a);
    }
  }

  &__tick {
    opacity: 0;
    transform: scale(0.2);
    transition: $checkbox-transition;
  }

  &__input:checked ~ &__box &__tick {
    opacity: 1;
    transform: scale(1);
  }

  &__input:checked ~ &__box {
    background-color: var(--accent--under);
  }

  &--toggler &__box,
  &--flip-switch &__box {
    height: $size;
    min-height: $size;
    width: 2 * $size;
    min-width: 2 * $size;

    border-radius: $border-radius--xl;

    &::after {
      content: "";
      position: absolute;

      height: $tick;
      width: $tick;
      border-radius: $border-radius--max;

      background-color: opaque-white(0.3);
      left: $offset;
      transform: scale(1);
      transition: $checkbox-transition;
    }
  }

  &--flip-switch &__box {
    margin-left: font-size--parent(1);
  }

  &--toggler &__input:checked ~ &__box,
  &--flip-switch &__input:checked ~ &__box {
    background-color: var(--accent--under-50a);

    &::after {
      left: 2 * $size - $tick - 2 * $offset;
      background-color: var(--accent--under);
    }
  }

  &--toggler &__tick,
  &--flip-switch &__tick {
    display: none;
  }

  &__flip-wrapper {
    display: flex;
    align-items: center;
  }
}