/*
 * 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: #861D13; /* Pico red 700 */
    --error-bg: #F8DCD6; /* Pico red 100 */
    /* For jade, light on dark looks better */
    --success-color: #70FCBA;  /* Pico jade 100 */
    --success-bg: #015234; /* Pico jade 700 */
    --backlog-color: #424751; /* Pico zinc 700 */
    --backlog-bg: #E0E3E7; /* Pico zinc 100 */ 
    --analysis-color: #5B4200; /* Pico amber 700 */
    --analysis-bg: #FDDEA6; /* Pico amber 100 */
    --info-color: #014C75; /* Pico azure 700 */
    --info-bg: #D1E5FB; /* Pico azure 100 */
}

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);
        }
    }
}

.badge {
    font-size: 0.875em;
    padding: 0.25em 0.5em;
    border: 1px solid var(--border-color, currentColor);
    color: var(--color, currentColor);
    background-color: var(--background-color, transparent);
    border-radius: 1em / 0.5em;
    font-weight: 500;
    text-transform: uppercase;
}

table {
    /* TODO: maybe extract into a separate file */
    details.dropdown {
        margin: 0;
    }
}

a[target=_blank]::after {
    content: url("mingcute/external_link_line.svg");
    display: inline-block;
    scale: 0.7;
    transform-origin: 0 50%;
}

.row {
    display: flex;
    flex-flow: row nowrap;
    align-items: baseline;
    gap: 1em;

    > * {
        margin: 0;
    }

    > .right {
        margin-left: auto;
    }
}

.mask-icon {
    display: inline-block;
    height: 1lh;
    width: 1lh;
    background-color: var(--icon-color, black);
    mask-image: var(--icon, url("mingcute/task_line.svg"));
    mask-size: 100%;
}