/*
 * 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.
 */

:root {
    --danger-color: #f14668;
}

body > header > *:only-child {
    margin-block-start: 0rem;
}

main {
    grid-template-columns: subgrid;
    display: grid;

    > * {
        grid-column: 2;
    }
}

.full-row {
    grid-column: 1 / -1;
}


ul {
    margin-top: 0;
    padding-left: 0;

    li {
        display: flex;
        align-items: center;
        gap: 0.5rem;

        .download-link {
            margin-left: 0.5rem;
            text-decoration: none;
            display: inline-block;

            &:hover {
                opacity: 0.7;
            }

            span {
                font-size: 1.2em;
            }
        }
    }
}

.isolated {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100px;
    pre {
        all: revert;
        display: revert;
        box-sizing: border-box;
    }
}

button.outline.danger {
    background-color: transparent !important;
    border-color: var(--danger-color) !important;
    color: var(--danger-color) !important;

    &:hover,
    &:focus {
        background-color: var(--danger-color) !important;
        border-color: var(--danger-color) !important;
        color: #ffffff !important;
    }
}

input {
    margin-bottom: 2rem;
}

h1 {
    font-size: var(--text-2xl);
}

h2 {
    font-size: var(--text-xl);
}

h3 {
    font-size: var(--text-lg);
}

main {
    height: 100vh;
}

.onlylogs-log-container {
    flex: 1
}