.main-toggle {
  width: 60px;
  height: 25px;
  background-color:#{$gray-400  };
  padding: 2px;
  position: relative;
  overflow: hidden;

  span {
    position: absolute;
    inset-block-start: 3px;
    inset-block-end: 3px;
    inset-inline-start: 3px;
    display: block;
    width: 20px;
    background-color: rgb($white) ;
    cursor: pointer;
    transition: all 0.2s ease-in-out;

    &::before, &::after {
      position: absolute;
      font-size: 10px;
      font-weight: 500;
      letter-spacing: .5px;
      text-transform: uppercase;
      color: rgb($white) ;
      inset-block-start: 2px;
      line-height: 1.38;
    }

    &::before {
      content: 'on';
      inset-inline-start: -25px;
    }

    &::after {
      content: 'off';
      inset-inline-end: -29px;
    }
  }

  &.on {
    background-color: #{$primary} !important;

    span {
      inset-inline-start: 37px;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .main-toggle span {
    transition: none;
  }
}

.main-toggle-secondary.on {
  background-color: #{$primary} !important;
}

.main-toggle-success.on {
  background-color: #{$success} !important;
}

.main-toggle-dark.on {
  background-color: #{$gray-900} !important;
}

.main-toggle-group-demo {
  display: flex;

  .main-toggle + .main-toggle {
    margin-inline-start: 10px;
  }
}