.gm-switch {
  position: relative;
  -webkit-appearance: none;
  outline: none;
  height: var(--gm-switch-size-height);
  border-radius: calc(var(--gm-switch-size-height) / 2);
  background-color: var(--gm-color-bg-switch);

  &::before {
    position: absolute;
    content: '';
    top: 1px;
    left: 1px;
    width: calc(var(--gm-switch-size-height) - 2px);
    height: calc(var(--gm-switch-size-height) - 2px);
    border-radius: 50%;
    background-color: #fff;
    transition: all 0.35s;
  }

  &::after {
    content: attr(data-text);
    color: white;
    padding-left: calc(var(--gm-switch-size-height) + 2px);
    line-height: calc(var(--gm-switch-size-height) + 2px);
    transition: all 0.35s;
  }
}

input.gm-switch {
  margin: 0;
}

.gm-switch:checked {
  background-color: var(--gm-color-primary);

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

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

  .gmDisabledWith();

  &.gm-switch-primary {
    background-color: var(--gm-color-primary);
  }

  &.gm-switch-success {
    background-color: var(--gm-color-success);
  }

  &.gm-switch-danger {
    background-color: var(--gm-color-bg-danger);
  }
}