@import "../../themes/anywhere.globals.scss";

:host {
  /**
    * CSS variables for the input switch component.
    * @prop --inputSwitchWidth: The width of the input switch.
    * @prop --inputSwitchHeight: The height of the input switch.
    * @prop --inputSwitchBorderRadius: The border radius of the input switch.
    * @prop --inputSwitchHandleWidth: The width of the input switch handle.
    * @prop --inputSwitchHandleHeight: The height of the input switch handle.
    * @prop --inputSwitchHandleBorderRadius: The border radius of the input switch handle.
    * @prop --inputSwitchSliderPadding: The padding of the input switch slider.
    * @prop --inputSwitchSliderOffBg: The background color of the input switch slider when in the off state.
    * @prop --inputSwitchHandleOffBg: The background color of the input switch handle when in the off state.
    * @prop --inputSwitchSliderOffHoverBg: The background color of the input switch slider when in the off state and hovered.
    * @prop --inputSwitchSliderOnBg: The background color of the input switch slider when in the on state, using the --primaryColor variable.
    * @prop --inputSwitchSliderOnHoverBg: The background color of the input switch slider when in the on state and hovered, using the --primaryDarkColor variable.
    * @prop --inputSwitchHandleOnBg: The background color of the input switch handle when in the on state.
    */

  display: inline-block;

  .any-inputswitch {
    position: relative;
    display: inline-block;
    user-select: none;
  }

  .any-inputswitch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

  .any-inputswitch-slider:before {
    position: absolute;
    content: "";
    top: 50%;
  }

  .any-inputswitch {
    width: var(--inputSwitchWidth);
    height: var(--inputSwitchHeight);
  }

  .any-inputswitch .any-inputswitch-slider {
    background: var(--inputSwitchSliderOffBg);
    transition: var(--formElementTransition);
    border-radius: var(--inputSwitchBorderRadius);
  }

  .any-inputswitch .any-inputswitch-slider:before {
    background: var(--inputSwitchHandleOffBg);
    width: var(--inputSwitchHandleWidth);
    height: var(--inputSwitchHandleHeight);
    left: var(--inputSwitchSliderPadding);
    margin-top: -0.625rem;
    border-radius: var(--inputSwitchHandleBorderRadius);
    transition-duration: var(--transitionDuration);
  }

  .any-inputswitch.any-inputswitch-checked .any-inputswitch-slider:before {
    transform: translateX(1.25rem);
  }

  .any-inputswitch.any-focus .any-inputswitch-slider {
    outline: var(--focusOutline);
    outline-offset: var(--focusOutlineOffset);
    box-shadow: var(--focusShadow);
  }

  .any-inputswitch:not(.any-disabled):hover .any-inputswitch-slider {
    background: var(--inputSwitchSliderOffHoverBg);
  }

  .any-inputswitch.any-inputswitch-checked .any-inputswitch-slider {
    background: var(--inputSwitchSliderOnBg);
  }

  .any-inputswitch.any-inputswitch-checked .any-inputswitch-slider:before {
    background: var(--inputSwitchHandleOnBg);
  }

  .any-inputswitch.any-inputswitch-checked:not(.any-disabled):hover .any-inputswitch-slider {
    background: var(--inputSwitchSliderOnHoverBg);
  }

  // any-inputswitch.ng-dirty.ng-invalid>.any-inputswitch {
  //   border-color: #f44336;
  // }
}
