/* Custom Switch */

$nwf-custom-switch-track-height: rem(23px);
$nwf-custom-switch-track-width: rem(46px);
$nwf-custom-switch-indicator-size: rem(25px);
$nwf-custom-switch-box-shadow: 0 2px 4px rgba($luci-color-black, 0.2);
$nwf-custom-switch-track-height-small: rem(16px);
$nwf-custom-switch-track-width-small: rem(32px);
$nwf-custom-switch-indicator-size-small: rem(18px);
$nwf-custom-switch-box-shadow-small: 0 1px 3px rgba($luci-color-black, 0.25);

.custom-control-label {
  cursor: pointer;
  user-select: none;

  small {
    line-height: 1;
  }
}

.custom-switch {
  padding-left: $nwf-custom-switch-track-width;

  .custom-control-input {
    &:focus {
      ~ .custom-control-label {
        &::before {
          box-shadow: none;
        }

        &::after {
          box-shadow: 0 0 0 2px #6c9cef;
        }
      }
    }

    &:checked {
      ~ .custom-control-label {
        &::after {
          transform: translateX(
            $nwf-custom-switch-track-width - $nwf-custom-switch-indicator-size
          );
          border: 2px solid $luci-interactive-color-default;
        }

        &:hover {
          &::after {
            border-color: $luci-interactive-color-hover !important;
          }
        }
      }
    }
  }

  .custom-control-label {
    padding-left: rem($luci-space-sm);

    &::before {
      top: 0 !important;
      background: $luci-icon-color-disabled;
      border: none;
      transition: background-color 0.3s ease-out;
      height: $nwf-custom-switch-track-height;
      left: -$nwf-custom-switch-track-width;
      width: $nwf-custom-switch-track-width;
    }

    &::after {
      background: white;
      border: 1px solid $luci-icon-color-disabled;
      border-radius: 50%;
      box-shadow: $nwf-custom-switch-box-shadow;
      height: $nwf-custom-switch-indicator-size;
      top: -1px;
      left: -$nwf-custom-switch-track-width;
      transition: transform 0.15s ease-in-out,
        background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
      width: $nwf-custom-switch-indicator-size;
    }

    &:hover {
      &::after {
        border-color: $luci-color-neutral-34;
      }
    }
  }

  /* Small switch is used in grids */
  &.custom-switch-sm {
    padding-left: $nwf-custom-switch-track-width-small;

    .custom-control-input {
      &:checked {
        ~ .custom-control-label {
          &::after {
            transform: translateX(
              $nwf-custom-switch-track-width-small -
                $nwf-custom-switch-indicator-size-small
            );
          }
        }
      }
    }

    .custom-control-label {
      padding-left: rem($luci-space-xs);

      &::before {
        height: $nwf-custom-switch-track-height-small;
        left: -$nwf-custom-switch-track-width-small;
        width: $nwf-custom-switch-track-width-small;
      }

      &::after {
        border-radius: 50%;
        border-width: 2px;
        box-shadow: $nwf-custom-switch-box-shadow-small;
        height: $nwf-custom-switch-indicator-size-small;
        left: -$nwf-custom-switch-track-width-small;
        width: $nwf-custom-switch-indicator-size-small;
      }
    }
  }
}