/* Wrapped in @layer overrides — 2026-08-18, CSS @layer restructuring (Basecamp "Fra Fizzy-gjennomgang: CSS-arkitektur"). See sand_ui/__sand_ui.css for the layer order. */
@layer overrides {
:root {
    caret-color: var(--signal);
}


} /* @layer overrides */

@layer base {
    :focus {
        outline: auto 2px var(--signal);
    }

    input[type="checkbox"] {
        width: var(--checkbox-size, inital);
        height: var(--checkbox-size, inital);
        accent-color: var(--signal); /* Or any other color */
    }
}

@layer components {
    .ui-input {
        display: block;
        padding: 0.5em;
        border: var(--spaceing-xxs) solid var(--border-color);
        border-radius: var(--spaceing-xs);
        font-family: var(--font-sans), sans-serif;
        font-size: var(--font-size-base);

        &.border-none {
            border: none;
        }
    }

    .ui-form {
        input[type="text"],
        input[type="email"],
        input[type="password"],
        select
        {
            padding: 0.5em;
            border: 1px solid var(--border-color);
            border-radius: var(--spaceing-xs);
        }
    }
    .ui-form {
        input[type="text"],
        input[type="email"],
        input[type="password"]{
            display: block;
            width: 100%;
        }
    }

    .ui-button {
        cursor: pointer;
        button {
            cursor: pointer;
        }
        input[type="file"] {
            display: none;
            position: absolute;
        }
    }

    .focus-group {
        &:focus-within {
            .flex-on-focus {
                display: flex;
            }
            .hide-on-focus {
                display: none;
            }
        }
        .flex-on-focus {
            display: none;
        }

    }

    .ui-input-box {
        min-height: var(--height-lg);
        display: flex;
        align-items: center;

    }
    .ui-input-box + .ui-input-box {
        border-left: var(--spaceing-xxs) solid var(--border-color-light);
    }
}