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

.qms-button-toggle-group {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  white-space: nowrap;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  border-radius: 4px;
  border: solid 1px #e0e0e0;

  .qms-button-toggle {
    font-family: "Open Sans";
    white-space: nowrap;
    position: relative;
    font-size: 14px;
    font-weight: 600;
    line-height: 16px;

    &.qms-button-toggle-appearance-standard {
      background-color: white;
      color: theme-apply($default-color);
      position: relative;

      .mat-icon {
        color: theme-apply($primary);
      }

      &:hover {
        background-color: theme-apply($primary-light-24-opacity) !important;
        color: theme-apply($primary);
      }

      &.qms-button-toggle-checked {
        background-color: theme-apply($primary-light-12-opacity);
        color: theme-apply($primary);
      }

      + {
        .qms-button-toggle {
          border-left: solid 1px #e0e0e0;
        }
      }

      &.cdk-keyboard-focused {
        background-color: theme-apply($primary-light-24-opacity) !important;
        color: theme-apply($primary);
      }
    }

    &.qms-button-toggle-appearance-active {
      background-color: theme-apply($primary-light-12-opacity);
      color: theme-apply($primary);

      &:hover {
        background-color: theme-apply($primary) !important;;
        color: white !important;;
      }

      &.qms-button-toggle-checked {
        background-color: theme-apply($primary);
        color: white;
      }

      + {
        .qms-button-toggle {
          border-left: solid 1px #e0e0e0;
        }
      }

      &.cdk-keyboard-focused {
        background-color: theme-apply($primary-light) !important;
        color: white !important;;
      }
    }

    &.qms-button-toggle-appearance-dark {
      background-color: theme-apply($default-color);
      color: white(0.6);

      .mat-icon {
        color: theme-apply($primary-light-32-opacity);
      }

      &:hover {
        background-color: theme-apply($primary-lighter) !important;;
        color: theme-apply($primary) !important;;

        mat-icon, .mat-icon {
          color: theme-apply($primary) !important;;
        }
      }

      &.qms-button-toggle-checked {
        background-color: theme-apply($primary-lighter);
        color: theme-apply($primary);

        .mat-icon {
          color: theme-apply($primary);
        }
      }

      + {
        .qms-button-toggle {
          border-left: solid 1px rgba(71, 71, 71, 1);
        }
      }

      &.cdk-keyboard-focused {
        background-color: theme-apply($primary-lighter) !important;
        color: theme-apply($primary) !important;

        mat-icon, .mat-icon {
          color: theme-apply($primary) !important;;
        }
      }
    }

    &.qms-button-toggle-disabled {
      cursor: default !important;
      background: #e4e4e4 !important;
      color: rgba(0, 0, 0, 0.38) !important;
      user-select: none;

      button {
        cursor: default !important;
        user-select: none;
      }

      .mat-icon {
        color: rgba(0, 0, 0, 0.38) !important;
      }
    }
  }

}

.qms-button-toggle {
  border: 0;
  background: none;
  color: inherit;
  padding: 0;
  margin: 0;
  font: inherit;
  outline: none;
  width: 100%;
  cursor: pointer;
}

.qms-button-toggle-label-content {
  padding: 0 12px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  display: inline-block;
  line-height: 36px;
  padding: 0 16px;
  position: relative;
}

.qms-button-toggle {

  .qms-button-toggle-label-content > * {
    vertical-align: middle;
  }
}
