@import 'mixins/objects.grid';

.c-toggle {
  @include grid;
  @include grid--center;

  width: auto;
  user-select: none;

  input:not(:checked) + .c-toggle__track {
    background-color: var(--color-dark);

    .c-toggle__handle {
      transform: translateZ(0);
    }
  }

  input:disabled + .c-toggle__track {
    cursor: not-allowed;
    opacity: var(--disabled-opacity);

    .c-toggle__handle {
      cursor: not-allowed;
      opacity: var(--disabled-opacity);
    }
  }

  input:active + .c-toggle__track,
  input:focus + .c-toggle__track {
    border-color: var(--border-color-focus);
    box-shadow: var(--box-shadow-focus);

    .c-toggle__handle {
      border-color: var(--border-color-focus);
      box-shadow: var(--box-shadow-focus), 0 1px 3px 1px var(--color-default);
    }
  }
}

.c-toggle--brand .c-toggle__track {
  --toggle-track-color: var(--color-brand);
}

.c-toggle--info .c-toggle__track {
  --toggle-track-color: var(--color-info);
}

.c-toggle--warning .c-toggle__track {
  --toggle-track-color: var(--color-warning);
}

.c-toggle--success .c-toggle__track {
  --toggle-track-color: var(--color-success);
}

.c-toggle--error .c-toggle__track {
  --toggle-track-color: var(--color-error);
}

.c-toggle input {
  position: absolute;
  opacity: 0;
}

.c-toggle__track {
  --toggle-track-color: var(--color-default);

  @include grid__cell;
  @include grid__cell--width-fixed;

  position: relative;
  width: 1em;
  height: 0.5em;
  margin: 0 0.5em;
  background-color: var(--toggle-track-color);
  border-radius: var(--border-radius-rounded);
}

.c-toggle__handle {
  position: absolute;
  top: -0.25em;
  left: 0;
  width: 1em;
  height: 1em;
  background-color: #fff;
  border-radius: var(--border-radius-rounded);
  box-shadow: 0 1px 3px 1px var(--color-default);
  transform: translateX(100%);
}