// .switch-containerr-regular {
//   //     width: -moz-fit-content;
//   width: fit-content;
//   // padding: 14px 16px 14px 16px;
//   border: 1px solid var(--hlx-color-primary);
//   box-sizing: border-box;
//   border-radius: 8px;
//   display: flex;
//   flex-direction: row;
//   height: 38px;
//   .switch-item-regular input[type='radio'] {
//     position: absolute;
//     opacity: 0;
//     width: 0;
//     height: 0;
//   }

//   .switch-item-regular input[type='radio']:checked + label {
//     background-color: #007aff;
//     color: #fff;
//   }

//   .switch-item-regular {
//     padding: 10px 14px 10px 14px;
//     background: var(--hlx-color-white);
//     text-align: center;
//     cursor: pointer;
//     border-radius: 7px;
//     display: flex;
//     flex-direction: row;
//     align-items: center;
//     justify-content: center;

//     font-size: 14px;
//     color: var(--hlx-text-color-primary);
//     // width: 100%;

//     .content-regular {
//       display: flex;
//       cursor: pointer;
//       font-size: 14px;
//       flex-direction: row;
//       align-items: center;
//       justify-content: center;
//       i {
//         font-size: var(--hlx-icon-size-sm);
//         margin-right: 8px;
//       }
//     }
//   }
//   .noborder {
//     border: none;
//   }
//   .border {
//     border-right: 1px solid var(--hlx-color-primary);
//     border-top-right-radius: 0px;
//     border-bottom-right-radius: 0px;
//     // border: none;
//   }
//   .selected-switch-regular {
//     color: var(--hlx-color-white);
//     background: var(--hlx-color-primary);
//   }
//   .noradius {
//     border-radius: 0;
//   }
//   // .radius {
//   // }
//   .noleftradius {
//     border-top-left-radius: 0px;
//     border-bottom-left-radius: 0px;
//   }
// }
// .switch-containerr-tab-top {
//   //     width: -moz-fit-content;
//   width: fit-content;
//   // padding: 14px 16px 14px 16px;
//   // border-top: 1px solid var(--hlx-border-color);
//   box-sizing: border-box;
//   border-radius: 6px;
//   display: flex;
//   flex-direction: row;
//   height: 38px;
//   .switch-item-tab-top {
//     padding: 10px 14px 10px 14px;
//     background: var(--hlx-color-white);
//     text-align: center;
//     cursor: pointer;
//     border-radius: 6px;
//     display: flex;
//     flex-direction: row;
//     align-items: center;
//     justify-content: center;

//     font-size: 14px;
//     color: var(--hlx-text-color-primary);
//     // width: 100%;

//     .content-tab-top {
//       display: flex;
//       font-size: 14px;
//       flex-direction: row;
//       cursor: pointer;
//       align-items: center;
//       justify-content: center;
//       i {
//         font-size: var(--hlx-icon-size-sm);
//         margin-right: 8px;
//       }
//       input[type='radio'] {
//         position: absolute;
//         opacity: 0;
//         width: 0;
//         height: 0;
//       }
//     }
//   }
//   .noborder {
//     border: none;
//   }
//   // .border{
//   //   border-right: 1px solid var(--hlx-color-primary);
//   //   border-top-right-radius: 0px;
//   //   border-bottom-right-radius: 0px;
//   //   // border: none;
//   // }
//   .selected-switch-tab-top {
//     color: var(--hlx-color-primary);
//     border-top: 2px solid var(--hlx-color-primary);
//     border-top-right-radius: 0px;
//     border-top-left-radius: 0px;
//     // background: var(--hlx-color-primary);
//   }
//   .noradius {
//     border-radius: 0;
//   }
//   // .radius {
//   // }
//   .noleftradius {
//     border-top-left-radius: 0px;
//     border-bottom-left-radius: 0px;
//   }
// }
// .switch-containerr-tab-bottom {
//   //     width: -moz-fit-content;
//   width: fit-content;
//   // padding: 14px 16px 14px 16px;
//   // border-bottom: 1px solid var(--hlx-border-color);
//   box-sizing: border-box;
//   border-radius: 6px;
//   display: flex;
//   flex-direction: row;
//   height: 38px;
//   .switch-item-tab-bottom {
//     padding: 10px 14px 10px 14px;
//     background: var(--hlx-color-white);
//     text-align: center;
//     cursor: pointer;
//     // border-radius: 6px;
//     display: flex;
//     flex-direction: row;
//     align-items: center;
//     justify-content: center;

//     font-size: 14px;
//     color: var(--hlx-text-color-primary);
//     border-bottom: 2px solid transparent;
//     // width: 100%;

//     .content-tab-bottom {
//       display: flex;
//       cursor: pointer;
//       font-size: 14px;
//       flex-direction: row;
//       align-items: center;
//       justify-content: center;
//       i {
//         font-size: var(--hlx-icon-size-sm);
//         margin-right: 8px;
//       }
//       input[type='radio'] {
//         position: absolute;
//         opacity: 0;
//         width: 0;
//         height: 0;
//       }
//     }
//   }
//   .noborder {
//     border: none;
//   }
//   // .border{
//   //   border-right: 1px solid var(--hlx-color-primary);
//   //   border-top-right-radius: 0px;
//   //   border-bottom-right-radius: 0px;
//   //   // border: none;
//   // }
//   .selected-switch-tab-bottom {
//     color: var(--hlx-color-primary);
//     border-bottom: 2px solid var(--hlx-color-primary);
//     border-top-right-radius: 0px;
//     border-top-left-radius: 0px;
//   }
//   .noradius {
//     border-radius: 0;
//   }
//   // .radius {
//   // }
//   .noleftradius {
//     border-top-left-radius: 0px;
//     border-bottom-left-radius: 0px;
//   }
// }

// .switchselectvalue {
//   border: none;
//   background-color: var(--hlx-color-primary) !important;
//   color: var(--hlx-color-white) !important;
// }
.hlx-btn-switch-group {
  .hlx-switch-btn {
    outline: none !important;
  }
  .hlx-switch-btn {
    font-family: var(--hlx-font-type-content);
    display: inline-flex;
    align-items: center;
    letter-spacing: 0.14px;
    // padding: 10px 14px;
    padding: .5em .7em;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    // line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 2px solid transparent;
    border-radius: 4px;
    // border-color: var(--hlx-color-primary);
    border-color: var(--hlx-color-primary);
    border-width: thin;
    &.--border-bottom,
    &.--border-top {
      border-color: transparent;
      border: none;
      border-radius: 0 !important;
      // border-width: unset;
    }
  }

  & > .hlx-switch-btn:last-child:not(:first-child),
  & > .dropdown-toggle:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  & > .hlx-switch-btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
    border-radius: 0;
  }

  & .hlx-switch-btn + .hlx-switch-btn,
  & .hlx-switch-btn + &,
  & & + .hlx-switch-btn,
  & & + & {
    margin-left: -1px;
  }

  .hlx-switch-btn-default {
    color: var(--hlx-text-color-primary);
    // background-color: #fff;
    border-color: var(--hlx-color-primary);
    border-width: thin;
    &.--border-bottom,
    &.--border-top {
      border: 2px solid;
      border-color: transparent;
    }

    &:hover,
    &:focus {
      color: var(--hlx-text-color-primary);
      background-color: va(--hlx-text-color-secondary);
      // border-color: #adadad;
      -webkit-box-shadow: inset 0px 0px 2px 1.3px rgba(0, 0, 0, 0.125);
      box-shadow: inset 0px 0px 2px 1.3px rgba(0, 0, 0, 0.125);
      &.--border-bottom {
        color: var(--hlx-color-primary) !important;
        background-color: transparent !important;
        -webkit-box-shadow: none;
        box-shadow: none;
        // border: 2px solid transparent;

        // border-color: transparent;
      }
    }
    &:focus {
      -webkit-box-shadow: inset 0px 0px 2px 1.3px rgba(0, 0, 0, 0.125);
      box-shadow: inset 0px 0px 2px 1.3px rgba(0, 0, 0, 0.125);
    }
    // &:focus {
    //   color: var(--hlx-text-color-primary);
    //   background-color: #e6e6e6;
    //   border-color: #8c8c8c;
    // }
  }
  .hlx-switch-btn:active {
    background-image: none;
    outline: 0;
    -webkit-box-shadow: inset 0px 0px 2px 0px rgba(0, 0, 0, 0.125);
    box-shadow: inset 0px 0px 2px 0px rgba(0, 0, 0, 0.125);
    // border-width: thin;

    &.--border-bottom {
      -webkit-box-shadow: none;
      box-shadow: none;
      color: var(--hlx-color-primary) !important;
      background-color: transparent !important;
      // border-width: 2px;
      // border-width: unset;

      // border-bottom-color: var(--hlx-color-primary);
    }
  }
  .hlx-switch-btn-read-only {
    color: var(--hlx-text-color-primary);
    // background-color: #fff;
    border-color: var(--hlx-color-primary);
    border-width: thin;
    &.--border-bottom,
    &.--border-top {
      border: 2px solid;
      border-color: transparent;
      &:active{
        color:inherit !important;
      }
    }

    &:hover,
    &:focus {
      cursor: default;
      color: var(--hlx-text-color-primary);
      background-color: va(--hlx-text-color-secondary);
      // border-color: #adadad;
      -webkit-box-shadow: none;
      box-shadow: none;
      &.--border-bottom {
        color: inherit !important;
        background-color: transparent !important;
        -webkit-box-shadow: none;
        box-shadow: none;
        // border: 2px solid transparent;

        // border-color: transparent;
      }
    }
    &:focus {
      -webkit-box-shadow: inset 0px 0px 2px 1.3px rgba(0, 0, 0, 0.125);
      box-shadow: inset 0px 0px 2px 1.3px rgba(0, 0, 0, 0.125);
    }
    // &:focus {
    //   color: var(--hlx-text-color-primary);
    //   background-color: #e6e6e6;
    //   border-color: #8c8c8c;
    // }
  }



  .hlx-switch-btn.focus,
  .hlx-switch-btn:focus,
  .hlx-switch-btn:hover {
    color: var(--hlx-text-color-primary);
    text-decoration: none;
    z-index: 0;
  }

  &,
  &-vertical {
    position: relative;
    display: flex;
    flex-wrap: nowrap;

    width: 100%;
    // flex-wrap: wrap;
    align-items: center;
    align-content: center;
  }

  .hlx-switch-btn-default.active,
  .hlx-switch-btn-default:active,
  .open > .dropdown-toggle.hlx-switch-btn-default {
    color: var(--hlx-text-color-primary);
    // background-color: va(--hlx-text-color-secondary);
  }

  .hlx-switch-btn-active {
    background-color: var(--hlx-color-primary) !important;
    color: white;
    // border-color: #265e4b;
    border-width: thin;

    z-index: 5;
    &:focus {
      box-shadow: inset 0px 0px 0px 0px rgba(0, 0, 0, 0.125);
    }
    &.--border-bottom {
      border-width: unset;

      color: var(--hlx-color-primary) !important;
      background-color: transparent !important;
      border-color: transparent !important ;
      border-bottom-color: var(--hlx-color-primary) !important ;
      // border-radius: 2.6px !important;
      border-bottom-left-radius: 1.8px !important;
      border-bottom-right-radius: 1.8px !important;
      border: 2px solid;
    }
  }

  .hlx-switch-btn-active:hover {
    color: #fff;
    background-color: var(--hlx-color-primary);
    // border-color: #265e4b;
    z-index: 5;
    &.--border-bottom {
      color: var(--hlx-color-primary) !important;
      background-color: transparent !important;
      border-color: transparent;
    }
  }
  .hlx-switch-btn-active.focus,
  .hlx-switch-btn-active:focus {
    color: white;
    background-color: var(--hlx-color-primary);
    // border-color: #265e4b;
    &.--border-bottom {
      color: var(--hlx-color-primary) !important;
      background-color: transparent !important;
      border-color: transparent;
    }
  }
  & > .hlx-switch-btn:first-child:not(:last-child):not(.dropdown-toggle) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  & > .hlx-switch-btn:first-child {
    margin-left: 0;
  }
  &-vertical > .hlx-switch-btn,
  & > .hlx-switch-btn {
    position: relative;
    float: left;
  }

  & > .hlx-switch-btn:first-child:not(:last-child):not(.dropdown-toggle) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  & > .hlx-switch-btn:first-child {
    margin-left: 0;
  }

  .hlx-switch-btn.active.focus,
  .hlx-switch-btn.active:focus,
  .hlx-switch-btn.focus,
  .hlx-switch-btn:active.focus,
  .hlx-switch-btn:active:focus,
  .hlx-switch-btn:focus {
    outline: thin dotted;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
  }

  & > .hlx-switch-btn.active,
  & > .hlx-switch-btn:active,
  & > .hlx-switch-btn:focus {
    z-index: 2;
  }
}