.gm-switch {
  position: relative;
  -webkit-appearance: none;
  height: 22px;
  border-radius: 11px;
  background-color: #afb5c0;

  &::before {
    position: absolute;
    content: '';
    top: 1px;
    left: 1px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #fff;
    transition: all 0.35s;
  }

  &::after {
    content: attr(data-text);
    color: white;
    padding-left: 24px;
    line-height: 22px;
    transition: all 0.35s;
  }
}

input.gm-switch {
  margin: 0;
}

.gm-switch:checked {
  background-color: @brand-primary;

  &::before {
    left: 100%;
    transform: translateX(-100%);
    margin-left: -1px;
  }

  &::after {
    padding-left: 6px;
  }

  &.gm-switch-disabled {
    cursor: @cursor-disabled;
    .opacity(0.6);
  }

  &.gm-switch-primary {
    background-color: @brand-primary;
  }

  &.gm-switch-success {
    background-color: @brand-success;
  }

  &.gm-switch-info {
    background-color: @brand-info;
  }

  &.gm-switch-warning {
    background-color: @brand-warning;
  }

  &.gm-switch-danger {
    background-color: @brand-danger;
  }
}