/*
 * The track paints its own ground, so there is no inner element between the
 * border and the thumb: `--primary` when on, a neutral when off, and the 1px
 * hairline over the top of both.
 *
 * The thumb travels one space rung. The 48/32/26 measures are the component's
 * own — a switch has no scale to take them from — and 2px of seat on every side
 * is half a rung.
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-switch {
    position: relative;
    display: flex;
    flex-shrink: 0;
    width: 48px;
    height: 32px;
    border-width: 1px;
    border-style: solid;
    border-color: var(--border);
    border-radius: var(--lotics-radius-full);
    background: var(--input);
    /* A switch SETS A VALUE; the pointer is reserved for what acts. */
    cursor: default;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--lotics-duration-fast) var(--lotics-ease-standard);
  }

  .lotics-switch[data-checked] {
    background: var(--primary);
  }

  .lotics-switch[data-disabled] {
    opacity: var(--lotics-disabled-opacity);
  }

  .lotics-switch:focus-visible {
    outline: var(--lotics-ring-width) solid var(--ring);
    outline-offset: 0;
  }

  .lotics-switch__thumb {
    position: absolute;
    top: var(--lotics-space-2);
    left: var(--lotics-space-2);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: var(--lotics-radius-full);
    background: var(--card);
    transition: transform var(--lotics-duration-fast) var(--lotics-ease-standard);
  }

  .lotics-switch__thumb[data-checked] {
    transform: translateX(var(--lotics-space-16));
  }
}