/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

body {
    display: flex;
    flex-flow: row nowrap;
}

site-sidebar {
    --background: var(--pico-primary);
    --color: white;

    h1, h2, h3, h4, h5, h6, p {
        color: var(--color);
    }
}

.links, .buttons {
    display: flex;
    flex-flow: row wrap;
    gap: 1em;
    padding: 0;

    li {
        list-style: none;
    }
}

:root {
    --error-color: rgb(155, 35, 24); /* Pico color red 650 */
}

form {
    .field-with-errors {
        input, select, textarea {
            border-color: var(--error-color);

            &:has(+ .error-text) {
                margin-bottom: 0;
            }
        }

        .error-text {
            color: var(--error-color);
            margin-bottom: var(--pico-spacing);
        }
    }
}