.switch {
  --_thumb-gutter: 2px;
  --_thumb-size: var(--grapes-unit-12);
  position: relative;
  display: flex;
  text-align: left;
  cursor: pointer;
}

.switchTrack {
  transition: background-color var(--grapes-transition-duration)
    var(--grapes-transition-timing-function);
  width: var(--grapes-size-switch);
  height: var(--grapes-unit-16);
  border-radius: var(--grapes-unit-16);
  box-sizing: border-box;
  background-color: var(--grapes-color-content-secondary-bg-primary);
}

.switchTrack:has(+ :checked) {
  background-color: var(--grapes-color-content-selected);
}

.switchThumb {
  transition: transform var(--grapes-transition-duration)
    var(--grapes-transition-timing-function);
  position: absolute;
  top: var(--_thumb-gutter);
  transform: translateX(var(--_thumb-gutter));
  width: var(--_thumb-size);
  height: var(--_thumb-size);
  border-radius: 50%;
  background-color: var(--grapes-color-background-primary-default);
}

.checkedSwitchThumb {
  transform: translateX(
    calc(var(--grapes-size-switch) - var(--_thumb-size) - var(--_thumb-gutter))
  );
}

.switchInput {
  appearance: none;
  position: absolute;
  width: var(--grapes-size-switch);
  height: var(--grapes-unit-16);
  cursor: inherit;
  display: block;
  border-radius: var(--grapes-unit-16);
  outline: none;
  margin: 0;

  &:focus-visible {
    outline: var(--grapes-focus-ring);
    outline-offset: var(--grapes-focus-ring-offset);
  }
}

.switch:has(:disabled) {
  cursor: not-allowed;

  .switchTrack {
    pointer-events: none;
    background-color: var(--grapes-color-background-primary-disabled);
    border: 1px solid var(--grapes-color-border-default);
  }

  .switchThumb {
    background-color: var(--grapes-color-content-disabled);
    /* The -1 compensates for the border which appears on the disabled switch. */
    transform: translateX(calc(var(--_thumb-gutter) - 1px));
  }

  .checkedSwitchThumb {
    /* The -1 compensates for the border which appears on the disabled switch. */
    transform: translateX(
      calc(
        var(--grapes-size-switch) - var(--_thumb-size) - var(--_thumb-gutter) -
          1px
      )
    );
  }
}