@import "../theme/variable";
@import "../theme/mixins";
@import "typography";

// SLIDE TOGGLE STYLES

.mat-mdc-slide-toggle {
  &.qms-group-options {
    font-family: Open Sans;
    font-style: normal;
    font-weight: normal;
    display: inline-block;
    padding: 5px 15px 5px 15px;
    border-radius: 4px;
    height: unset;
    /* TODO(mdc-migration): The following rule targets internal classes of slide-toggle that may no longer apply for the MDC version.*/
    .mat-slide-toggle-bar {
      margin-right: 19px;
    }

    &:hover:not(.mat-disabled) {
      background-color: black(0.08);
    }

    &:active:not(.mat-disabled) {
      background-color: black(0.12);
    }

    &.cdk-keyboard-focused {
      background-color: black(0.08);
    }
    /* TODO(mdc-migration): The following rule targets internal classes of slide-toggle that may no longer apply for the MDC version.*/
    .mat-slide-toggle-thumb {
      background-color: black(0.6);
    }
    /* TODO(mdc-migration): The following rule targets internal classes of slide-toggle that may no longer apply for the MDC version.*/
    .mat-slide-toggle-content {
      font-family: Open Sans;
      display: flex;
      flex-direction: column;
    }
    /* TODO(mdc-migration): The following rule targets internal classes of slide-toggle that may no longer apply for the MDC version.*/
    .mat-slide-toggle-thumb {
      background-color: theme-apply($ws-action-active);
    }

    .text-label {
      font-size: 1rem;
      line-height: 28px;
      color: theme-apply($default-color);
    }

    .text-help {
      font-size: 0.75rem;
      line-height: 16px;
      color: black(0.6);
      white-space: break-spaces;
    }

    .mat-mdc-form-field-error {
      color: theme-apply($error);
    }

    &.error-form {
      border-bottom: 2px solid theme-apply($error);
    }

    .mdc-switch--disabled {
      opacity: 1;
      /* TODO(mdc-migration): The following rule targets internal classes of slide-toggle that may no longer apply for the MDC version.*/
      .mat-slide-toggle-thumb {
        background-color: $primary-dark-1-disable-background;
      }
      /* TODO(mdc-migration): The following rule targets internal classes of slide-toggle that may no longer apply for the MDC version.*/
      .mat-slide-toggle-bar {
        background-color: black(0.6);
        opacity: 0.38;
      }

      &.mat-mdc-slide-toggle-checked {
        /* TODO(mdc-migration): The following rule targets internal classes of slide-toggle that may no longer apply for the MDC version.*/
        .mat-slide-toggle-thumb {
          background-color: theme-apply($primary-circle-background-hover);
        }
        /* TODO(mdc-migration): The following rule targets internal classes of slide-toggle that may no longer apply for the MDC version.*/
        .mat-slide-toggle-bar {
          background-color: theme-apply($primary-dark-3-disable-background);
        }
      }
    }

    &.mat-disabled:not(.mat-mdc-slide-toggle-checked) {
      /* TODO(mdc-migration): The following rule targets internal classes of slide-toggle that may no longer apply for the MDC version.*/
      .mat-slide-toggle-thumb {
        background-color: theme-apply($primary-dark-1-disable-background);
      }
      /* TODO(mdc-migration): The following rule targets internal classes of slide-toggle that may no longer apply for the MDC version.*/
      .mat-slide-toggle-bar {
        background-color: theme-apply($primary-dark-4-disable-background);
      }
    }

    &.mat-mdc-slide-toggle-checked {
      /* TODO(mdc-migration): The following rule targets internal classes of slide-toggle that may no longer apply for the MDC version.*/
      .mat-slide-toggle-bar {
        background-color: theme-apply($primary-light-38-opacity);
      }

      .mat-ripple-element {
        background-color: theme-apply($primary-circle-background-hover);
      }

      &.cdk-keyboard-focused {
        &:not(.ng-invalid) {
          background-color: theme-apply($primary-dark-24-opacity);
        }
      }

      &:hover:not(.mat-disabled) {
        background-color: theme-apply($primary-dark-24-opacity);
      }

      &:active:not(.mat-disabled) {
        background-color: theme-apply($primary-light-32-opacity);
      }
      /* TODO(mdc-migration): The following rule targets internal classes of slide-toggle that may no longer apply for the MDC version.*/
      .mat-slide-toggle-thumb {
        background-color: theme-apply($primary);
      }
    }

    //-------------------Start No Label-----------------------------//
    &.none-label {
      /* TODO(mdc-migration): The following rule targets internal classes of slide-toggle that may no longer apply for the MDC version.*/
      .mat-slide-toggle-bar {
        margin-right: 0;
      }

      &:hover:not(.mat-disabled),
      &:active:not(.mat-disabled),
      &.cdk-keyboard-focused,
      &.mat-mdc-slide-toggle-checked {
        background-color: transparent;
      }
    }
    //-------------------End No Label-----------------------------//

    .mdc-label {
      display: flex;
      flex-direction: column;
    }

    .mdc-switch:enabled .mdc-switch__track::after {
      background-color: theme-apply($primary-dark-24-opacity);
    }

    .mdc-switch:enabled:hover:not(:focus):not(:active)
      .mdc-switch__track::after {
      background-color: theme-apply($primary-dark-24-opacity);
    }

    .mdc-switch:enabled:focus:not(:active) .mdc-switch__track::after {
      background-color: theme-apply($primary-dark-24-opacity);
    }

    .mdc-switch.mdc-switch--selected:enabled .mdc-switch__handle::after {
      background-color: theme-apply($primary);
    }

    .mdc-switch.mdc-switch--selected:enabled:hover:not(:focus):not(:active)
      .mdc-switch__handle::after {
      background-color: theme-apply($primary);
    }

    .mdc-switch.mdc-switch--selected:enabled:focus:not(:active)
      .mdc-switch__handle::after.mdc-switch.mdc-switch--selected:enabled:focus:not(
        :active
      )
      .mdc-switch__handle::after {
      background-color: theme-apply($primary);
    }

    .mdc-switch.mdc-switch--selected:enabled:focus:not(:active)
      .mdc-switch__handle::after {
      background-color: theme-apply($primary);
    }

    .mdc-switch.mdc-switch--unselected:enabled:hover:not(:focus):not(:active)
      .mdc-switch__handle::after {
      background-color: var(--mdc-switch-unselected-handle-color);
    }
  }
}
