/* Switch control styles for NxBool (nx-switch, nx-switch-on, nx-switch-off) */
.nx-switch {
    display: flex;
    flex-direction: row;
    justify-content: center;
    justify-items: center;
    align-items: center;
    padding-top: 5px;
    padding-bottom: 5px;
}

.nx-switch-inner {
    --nx-switch-width: 48px;
    --nx-switch-height: 28px;
    --nx-switch-thumb: 22px;
    display: inline-block;
    width: var(--nx-switch-width);
    height: var(--nx-switch-height);
    position: relative;
    border-radius: calc(var(--nx-switch-height) / 2);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    user-select: none;
    margin-right: calc(var(--nx-space) * 2);
    margin-top: calc(var(--nx-space) * 0.5);
    margin-bottom: calc(var(--nx-space) * 0.5);
}

    /* Track container (visual background) */
    .nx-switch-inner .nx-switch-track {
        width: 100%;
        height: 100%;
        border-radius: inherit;
        box-sizing: border-box;

        transition: background-color 180ms ease, box-shadow 180ms ease;
        background-color: var(--nx-switch-off-bg, #d8d8d8);
  
    }

    /* The movable thumb */
    .nx-switch-inner .nx-switch-thumb {
        position: absolute;
        top: 50%;
        left: 2px;
        width: var(--nx-switch-thumb);
        height: var(--nx-switch-thumb);
        transform: translateY(-50%) translateX(0);
        border-radius: 50%;
        background-color: var(--nx-switch-thumb-bg, #ffffff);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
        transition: transform 180ms cubic-bezier(.2,.9,.2,1), box-shadow 120ms ease;
        will-change: transform;
    }

    /* ON state (right = true) */
    .nx-switch-inner.nx-switch-on .nx-switch-track {
        background-color: var(--nx-positive-fg); /* primary accent */
        box-shadow: inset 0 0 0 0 rgba(0,0,0,0.06);
    }

    .nx-switch-inner.nx-switch-on .nx-switch-thumb {
        /* move thumb to the right, account for padding (2px left+right = 4px) */
        transform: translateY(-50%) translateX(calc(var(--nx-switch-width) - var(--nx-switch-thumb) - 4px));
    }

    /* OFF state (left = false) - explicit in case theme overrides are used */
    .nx-switch-inner.nx-switch-off .nx-switch-track {
        background-color: var(--nx-switch-off-bg, #d8d8d8);
    }

    .nx-switch-inner.nx-switch-off .nx-switch-thumb {
        transform: translateY(-50%) translateX(0);
    }

    /* Focus / keyboard accessibility */
    .nx-switch-inner:focus .nx-switch-thumb,
    .nx-switch-inner:focus {
        box-shadow: 0 0 0 4px rgba(0, 120, 212, 0.12);
    }

    /* Disabled / readonly appearance */
    .nx-switch-inner[aria-disabled="true"],
    .nx-switch-inner.disabled,
    .nx-switch-inner[disabled] {
        opacity: 0.6;
        cursor: not-allowed;
        pointer-events: none;
    }