@import "../../../themes/core/colors";
@import "../../../themes/core/typography";

.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: $default-color;
      position: relative;

      .mat-icon {
        color: $primary;
      }

      &:hover {
        background-color: $primary-light-3-opacity;
      }

      &.qms-button-toggle-checked {
        background-color: $primary-light-3-opacity;
        color: $primary;
      }

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

      &.cdk-keyboard-focused {
        &::after {
          content: "";
          display: block;
          position: absolute;
          top: 0;
          right: 0;
          width: 3px;
          height: 100%;
          background: $primary-light;
        }

        &:before {
          content: "";
          display: block;
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          border: 3px solid $primary-light;
        }
      }
    }

    &.qms-button-toggle-appearance-active {
      background-color: $primary-light-3-opacity;
      color: $primary;

      &:hover {
        background-color: $primary;
        color: white;
      }

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

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

      &.cdk-keyboard-focused {
        &::after {
            content: "";
            display: block;
            position: absolute;
            top: 0;
            right: 0;
            width: 3px;
            height: 100%;
            background: $primary-light;
          }
  
          &:before {
            content: "";
            display: block;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            border: 3px solid $primary-light;
          }
      }
    }

    &.qms-button-toggle-appearance-dark {
      background-color: $default-color;
      color: rgba(255, 255, 255, 0.6);

      .mat-icon {
        color: $primary-light-32-opacity;
      }

      &:hover {
        background-color: $primary-lighter;
        color: $primary;
      }

      &.qms-button-toggle-checked {
        background-color: $primary-lighter;
        color: $primary;

        .mat-icon {
          color: $primary;
        }
      }

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

      &.cdk-keyboard-focused {
        &::after {
            content: "";
            display: block;
            position: absolute;
            top: 0;
            right: 0;
            width: 3px;
            height: 100%;
            background: $primary-light;
          }
  
          &:before {
            content: "";
            display: block;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            border: 3px solid $primary-light;
          }
      }
    }

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

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

//   &.qms-button-toggle-group-appearance-standard {
//     background-color: white;
//   }

//   &.qms-button-toggle-group-appearance-active {
//     background-color: $primary-light-3-opacity;
//   }

//   &.qms-button-toggle-group-appearance-dark {
//     background-color: $default-color;
//   }
}

.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 {
//   &:not([disabled]):hover {
//     text-decoration: none;
//   }

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

//   &::after {
//     content: "";
//     position: absolute;
//     top: 50%;
//     left: 50%;
//     width: 10px;
//     height: 10px;
//     background: rgba(255, 255, 255, 0.5);
//     opacity: 0;
//     border-radius: 100%;
//     transform: scale(1, 1) translate(-50%);
//     transform-origin: 50% 50%;
//   }

//   &:not([disabled]):focus {
//     &:not(:active) {
//       &::after {
//         animation: ripple 1s ease-out;
//       }
//     }
//   }
}

// @keyframes ripple {
//   0% {
//     transform: scale(0, 0);
//     opacity: 1;
//   }
//   20% {
//     transform: scale(25, 25);
//     opacity: 1;
//   }
//   100% {
//     opacity: 0;
//     transform: scale(40, 40);
//   }
// }
