@import "settings";

$tgl-width: 32px;
$tgl-btn-width: 12px;
$tgl-btn-offset: 2px;
$tgl-label-margin: 4px;

body[data-theme=light] {
  --saturate: -82%;
}

body[data-theme=dark] {
  --saturate: -55%;
}

.tgl {
  display: none;

  + .tgl-btn {
    background-color: adjust-saturation('primary', var(--saturate));
    border-radius: $tgl-width * 0.5;
    cursor: pointer;
    display: inline-block;
    height: $tgl-width * 0.5;
    margin-top: 1px; // to align with label
    min-width: $tgl-width;
    outline: 0;
    position: relative;
    transition: all .2s ease;
    user-select: none;
    width: $tgl-width;

    // handle
    &::after {
      background: $bg;
      border-radius: 50%;
      content: "";
      height: $tgl-btn-width;
      left: 0;
      position: absolute;
      top: 0;
      transform: translate3d($tgl-btn-offset, $tgl-btn-offset, 0);
      transition: all .2s ease-out;
      width: $tgl-btn-width;
    }

  }

  &:checked + .tgl-btn {
    background-color: $primary;
    &::after {
      left: $tgl-width - $tgl-btn-width - $tgl-btn-offset * 2;
    }
  }

  &:disabled + .tgl-btn {
    cursor: not-allowed;
    background-color: set-alpha('color', 0.1);
    &::after {
      background-color: set-alpha('color', 0.4);
    }
  }

}

.tgl-subtxt {
  color: $color-op-min;
  font-size: $font-size-small;
  padding: $tgl-label-margin 0;
}