/* <Switch /> — default styling, lm-switch-* convention */
.lm-switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.lm-switch .lm-switch-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* ---- coexistence with jsuites/jspreadsheet pages: jsuites ships its own
   .lm-switch drawn with `> input` (a 30px fading circle) and generic
   `> span::before/::after` pseudo pills — on our markup those paint a
   SECOND phantom switch next to ours and drop a stray thumb on our track.
   Neutralize them on our structure; where specificity ties, the v6 sheet
   loads after the jsuites/jspreadsheet CDN css by convention. */
.lm-switch::before {
    content: none;
}

.lm-switch > .lm-switch-track,
.lm-switch > .lm-switch-label {
    margin: 0;
}

/* jsuites' `>span { max-width: -webkit-fill-available }` squeezes the
   track (we never set max-width, so nothing contested it) and the thumb
   overhangs — pin the track rigid */
.lm-switch > .lm-switch-track {
    max-width: none;
    flex: none;
}

/* !important: jsuites' checked-state variants (`>input:checked+span::after`,
   0-2-2) outgun any plain structural selector we can write here */
.lm-switch > .lm-switch-track::before,
.lm-switch > .lm-switch-track::after,
.lm-switch > .lm-switch-label::before,
.lm-switch > .lm-switch-label::after {
    content: none !important;
}

.lm-switch > input.lm-switch-input {
    appearance: none;
    -webkit-appearance: none;
    position: absolute;
    left: auto;
    right: auto;
    margin: 0;
    opacity: 0 !important;
    width: 0;
    height: 0;
    max-width: none;
    max-height: none;
    background: none;
    border-radius: 0;
    transform: none !important;
    transition: none;
    pointer-events: none;
}

.lm-switch .lm-switch-track {
    display: inline-block;
    width: 40px;
    height: 22px;
    border-radius: 11px;
    background: var(--lm-border-color, #e4e4e7);
    position: relative;
    transition: background 0.15s ease;
}

.lm-switch .lm-switch-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--lm-background-color, #fff);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    transition: left 0.15s ease;
}

.lm-switch .lm-switch-input:focus-visible ~ .lm-switch-track {
    outline: 2px solid var(--lm-border-outline, #2563eb);
    outline-offset: 2px;
}

/* ON = the catalog accent (Radix/shadcn convention: primary, not a status
   colour); green stays available as an explicit color="green" variant */
.lm-switch.lm-switch-on .lm-switch-track {
    background: var(--lm-main-color, #2563eb);
}

.lm-switch.lm-switch-on[data-color='green'] .lm-switch-track {
    background: var(--lm-color-success, #16a34a);
}

.lm-switch.lm-switch-on[data-color='orange'] .lm-switch-track {
    background: var(--lm-color-warning, #ea580c);
}

.lm-switch.lm-switch-on[data-color='red'] .lm-switch-track {
    background: var(--lm-color-danger, #dc2626);
}

.lm-switch.lm-switch-on[data-color='purple'] .lm-switch-track {
    background: var(--lm-color-purple, #9333ea);
}

.lm-switch.lm-switch-on .lm-switch-thumb {
    left: 20px;
}

.lm-switch.lm-switch-disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.lm-switch .lm-switch-label {
    font: 14px/1.4 system-ui, sans-serif;
}

.lm-switch[data-position='right'] {
    flex-direction: row-reverse;
}

/* Sizes */
.lm-switch.lm-switch-small .lm-switch-track {
    width: 30px;
    height: 16px;
    border-radius: var(--lm-radius, 6px);
}

.lm-switch.lm-switch-small .lm-switch-thumb {
    width: 12px;
    height: 12px;
}

.lm-switch.lm-switch-small.lm-switch-on .lm-switch-thumb {
    left: 16px;
}

.lm-switch.lm-switch-large .lm-switch-track {
    width: 52px;
    height: 28px;
    border-radius: 14px;
}

.lm-switch.lm-switch-large .lm-switch-thumb {
    width: 24px;
    height: 24px;
}

.lm-switch.lm-switch-large.lm-switch-on .lm-switch-thumb {
    left: 26px;
}