@import "typography";
@import "colors";

// SLIDE TOGGLE STYLES

.mat-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;

    .mat-slide-toggle-bar {
      margin-right: 19px;
      background-color: #c5c5c5;

      &:hover {
        .mat-slide-toggle-persistent-ripple {
          opacity: 0.08;
          background-color: black;
        }
      }      
    }

    .mat-slide-toggle-thumb {
      background-color: black(0.6);
    }

    .mat-slide-toggle-content {
      display: flex;
      flex-direction: column;
    }

    .text-label {
      font-size: 1rem;
      line-height: 28px;
      color: $default-color;
      white-space: break-spaces;
    }

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

    .mat-error {
      color: $error;
    }

    &:not(.mat-disabled).mat-checked.cdk-keyboard-focused {
      .mat-slide-toggle-persistent-ripple {
        opacity: 1;
        // border: 2px solid $secondary;
        background: $secondary-light-6-opacity;
      }
    }

    &:not(.mat-disabled).cdk-keyboard-focused {
      .mat-slide-toggle-persistent-ripple {
        opacity: 1;
        // border: 2px solid $primary;
        background: black(0.12);
      }
    }

    &.mat-disabled {
      opacity: 1;

      .mat-slide-toggle-thumb {
        background-color: #bfbfbf;
      }

      .mat-slide-toggle-bar {
        background-color: #e9e9e9;
      }
    }

    &.mat-checked {
      .mat-slide-toggle-bar {
        background-color: #dab3a4;

        &:hover {
          .mat-ripple-element.mat-slide-toggle-persistent-ripple {
            opacity: 1;
            background-color: $secondary-light-6-opacity;
          }
        }

        &:active {
          .mat-ripple-element.mat-slide-toggle-persistent-ripple {
            opacity: 1;
            background-color: $secondary-light-12-opacity;
          }
        }
      }

      .mat-ripple-element {
        background-color: $secondary;
      }

      .mat-slide-toggle-thumb {
        background-color: $secondary;
      }
    }
  }
}
