@layer atoms {
  /* stylelint-disable no-descending-specificity -- complex component with many state combinations */
  .mobius-switch__slider {
    position: absolute;
    cursor: pointer;
    border-radius: 30px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-border);
    transition: var(--switch-transition-duration);

    &:before {
      position: absolute;
      content: "";
      border-radius: 50%;
      height: 26px;
      width: 26px;
      left: 3px;
      bottom: 2px;
      background-color: var(--color-background);
      transition: var(--switch-transition-duration);
    }
  }

  .mobius-switch {
    position: relative;
    display: inline-block;
    border-radius: 30px;
    width: 55px;
    height: 30px;

    & input {
      opacity: 0;
      width: 0;
      height: 0;

      &:focus-visible {
        & + .mobius-switch__slider {
          box-shadow: var(--box-shadow-default);
        }
      }
    }
  }

  .mobius-switch--checked {
    & .mobius-switch__slider {
      background-color: var(--color-primary);

      &:hover {
        background-color: var(--color-primary-hover);
      }
    }

    & .mobius-switch__slider:before {
      transform: translateX(23px);
    }
  }

  .mobius-switch--disabled {
    & .mobius-switch__slider {
      &:hover {
        cursor: not-allowed;
      }
    }
  }

  .mobius-switch--disabled:not(.mobius-switch--checked) {
    & .mobius-switch__slider {
      background-color: var(--color-background-light);
    }
  }

  .mobius-switch--disabled.mobius-switch--checked {
    & .mobius-switch__slider {
      background-color: var(--color-primary-light);
    }
  }
}
