@use '../../../scss/variables' as *;

$toggle-control-width: 24px;
$toggle-control-height: 16px;
$toggle-control-knob-margin: 2px;

// prettier-ignore
$toggle-control-knob-size: calc($toggle-control-height - 2 * $toggle-control-knob-margin);

.toggle-control {
  -webkit-touch-callout: none;
  position: relative;
  display: inline-block;
  width: $toggle-control-width;
  height: $toggle-control-height;
  vertical-align: middle;
  overflow: hidden;

  &:focus-within {
    outline: $focus-outline;
  }

  input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* hide the checkbox */
    margin: 0;
    padding: 0;
    opacity: 0;
    border: none;
    background: none;
    appearance: none;
  }

  .toggle-control-layers {
    pointer-events: none;
  }

  .toggle-control-layers,
  .toggle-control-layer,
  .toggle-control-unchecked-color,
  .toggle-control-checked-color {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: $toggle-control-height * 0.5;
  }

  .toggle-control-unchecked-color {
    background: var(--inactive-controls-color);
  }

  .toggle-control-checked-color {
    background: var(--active-controls-color);
    transition: $anim;
    opacity: 0;
  }

  .toggle-control-knob {
    display: block;
    width: $toggle-control-knob-size;
    height: $toggle-control-knob-size;
    background: var(--primary-button-fg-color);
    border-radius: $toggle-control-height * 0.5;
    transform: translate(
      $toggle-control-knob-margin,
      $toggle-control-knob-margin
    );
    transition: $anim;
  }

  input:checked + .toggle-control-layers {
    .toggle-control-checked-color {
      opacity: 1;
    }

    // prettier-ignore
    .toggle-control-knob {
      transform: translate(
        calc($toggle-control-width - $toggle-control-knob-size - $toggle-control-knob-margin),
        $toggle-control-knob-margin
      );
    }
  }
}
