.switch {
  display: inline-flex;
  flex-direction: row;
  user-select: none;
}

.switch__checkbox {
  display: inline-block;
}

.switch__input {
  outline-width: 0;
  appearance: none;
  -webkit-appearance: none;
  caret-color: var(--color-text);
}

.switch__label {
  display: block;
  position: relative;
  background-color: var(--color-input-bg);
  border-top: var(--input-border-size) solid var(--color-input-border);
  border-bottom: var(--input-border-size) solid var(--color-input-border);
  border-right: var(--input-border-size) solid var(--color-input-border);
  border-left: var(--input-border-size) solid var(--color-input-border);
  min-width: 2.9em;
  min-height: 2.9em;
  padding: var(--size-3);
  font-size: var(--size-0);
  color: var(--color-text);
  text-align: center;
  line-height: 1.2;
}
.switch.is-flush-left .switch__label {
  border-left: none;
}
.switch.is-flush-right .switch__label {
  border-right: none;
}

.switch__input:checked + .switch__label {
  color: var(--color-input-bg);
}

.switch__input:disabled + .switch__label {
  opacity: 0.6;
}

.switch__label-text {
  position: relative;
  z-index: 1;
}

.switch__input:checked + .switch__label::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--color-text);
  z-index: 0;
}