@use 'settings' as *;

.cc-switch {
  position: relative;
  display: block;
  width: $cc-switch-width;
  height: $cc-switch-height;
  cursor: pointer;
}

.cc-switch__input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
  opacity: 0;
}

.cc-switch__input:disabled {
  cursor: not-allowed;
}

.cc-switch__track {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--cc-color-border);
  border-radius: 62.4375em;
  transition: background-color 160ms ease;
}

.cc-switch__track::after {
  position: absolute;
  top: $cc-switch-knob-offset;
  left: $cc-switch-knob-offset;
  width: $cc-switch-knob-size;
  height: $cc-switch-knob-size;
  content: '';
  background: #fff;
  border-radius: 50%;
  transition: transform 160ms ease;

  .cc-root[dir='rtl'] &,
  .cc-modal[dir='rtl'] & {
    right: $cc-switch-knob-offset;
    left: auto;
  }
}

.cc-switch__input:checked + .cc-switch__track {
  background: var(--cc-color-primary);
}

.cc-switch__input:disabled + .cc-switch__track {
  cursor: not-allowed;
  opacity: 0.65;
}

.cc-switch__input:focus-visible + .cc-switch__track {
  outline: 0.125em solid var(--cc-color-focus);
  outline-offset: 0.125em;
}

.cc-switch:hover .cc-switch__input:not(:disabled) + .cc-switch__track {
  background: var(--cc-color-secondary-active);
}

.cc-switch:hover .cc-switch__input:checked:not(:disabled) + .cc-switch__track {
  background: var(--cc-color-primary-hover);
}

.cc-switch__input:checked + .cc-switch__track::after {
  transform: translateX($cc-switch-travel);

  .cc-root[dir='rtl'] &,
  .cc-modal[dir='rtl'] & {
    transform: translateX(-$cc-switch-travel);
  }
}