.ui-toggle {
  @extend       .ui-text--lg;
  color:        rgba(0,0,0,0.85);
  font-weight:  400;
  line-height:  18px !important;
  position:     relative;
  padding-left: 69px;
  cursor:       pointer;
  color:        #000;
  display:      block;
  user-select:  none;

  > label {
    min-height: 1em;
    margin:     0;
  }

  body.ui-normalize & {
    margin-bottom: 40px;
  }

  .ui-hint {
    margin-top:    10px;
    margin-bottom: -2px;
  }

  &::before {
    display:       block;
    content:       "";
    position:      absolute;
    left:          0;
    top:           0;
    width:         40px;
    height:        20px;
    border:        1px solid #dadada;
    border-radius: 10px;
    background:    #fff none;
  }

  &::after {
    display:       block;
    content:       "";
    position:      absolute;
    left:          7px;
    top:           8px;
    width:         12px;
    height:        4px;
    border-radius: 5px;
    background:    #989898 none;
    transition:    all .2s ease, left .2s ease, border-radius .2s;
  }

  &--active::after {
    width:            10px;
    height:           10px;
    left:             24px;
    top:              5px;
    background-color: map-get($colors, 'limeGreen');
    box-shadow:       0 2px 3px -1px rgba(45, 159, 110, .6);
  }

  &--disabled {
    color: #989898;

    &:hover::before, &::before {
      border-color:     #e4e4e4;
      background-color: rgba(231,231,231,0.53);
    }

    &::after {
      background-color: #989898;
      box-shadow: none;
    }
  }

  &--null::after {
    left:          16px;
    top:           5px;
    width:         10px;
    height:        10px;
    box-shadow:    inset 0 0 0 1px #dadada;
    background:    rgba(0,0,0,0.06);
  }

  @media (min-width: map-get($grid-breakpoints, 'md')) {
    &:hover::before {
      border-color: map-get($colors, 'limeGreen');
    }
  }

}