/* 
 * -------------------------
 * CSS styling for the general portal components 
 ---------------------------
*/

:root {
    --sidebar-link-color: #c2f1c9;
    --body-font-size: 0.95em;
    --default-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

body {
    font-family: var(--default-font-family);
}

main {
    height: 100%;
    max-height: 100%;
    overflow-x: auto;
    overflow-y: auto;
    margin-left: 260px;

    .text-version {
        font-size: 0.8em;
    }

    .font-monospace {
        font-size: var(--body-font-size);
    }

    .alert {
        font-size: var(--body-font-size);
        padding: 0.5em 1em;
    }


    .sidebar-vertical-divider {
        background-color: rgba(0, 0, 0, .1);
        border: solid rgba(0, 0, 0, .15);
        border-width: 1px 0;
        box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
    }

    .sidebar-vertical-row {
        flex-shrink: 0;
        width: 0.1rem;
        min-height: 100vh;
        height: auto;
    }

    .container-fluid {
        font-size: var(--body-font-size);

        input,
        button {
            font-size: var(--body-font-size);
        }

    }

    .sidebar {
        width: 260px;
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;

        .top-link-full-width {
            width: 100%;
        }

        .sub-link-full-width {
            width: 90%;
        }

        .btn-toggle {
            padding: .25rem .75rem;
            font-weight: 600;
            color: rgba(0, 0, 0, .85);
            background-color: transparent;
        }

        .standard-link {
            padding: .25rem .75rem;
            margin-bottom: .25rem;
            margin-left: 0rem;
            font-weight: 600;
            color: rgba(0, 0, 0, .85);
            background-color: transparent;
        }

        .standard-link:hover,
        .standard-link:focus,
        .standard-link.active {
            color: rgba(0, 0, 0, .85);
            background-color: var(--sidebar-link-color);
        }

        .btn-toggle:hover,
        .btn-toggle:focus {
            color: rgba(0, 0, 0, .85);
            background-color: var(--sidebar-link-color);
        }

        .btn-toggle::before {
            width: 1.25em;
            line-height: 0;
            content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
            transition: transform .35s ease;
            transform-origin: .5em 50%;
        }

        .btn-toggle[aria-expanded="true"] {
            color: rgba(0, 0, 0, .85);
        }

        .btn-toggle[aria-expanded="true"]::before {
            transform: rotate(90deg);
        }

        .btn-toggle-nav1 a {
            padding: .25rem .5rem;
            margin-top: .125rem;
            margin-left: 1.25rem;
        }

        .btn-toggle-nav1 a:hover,
        .btn-toggle-nav1 a:focus {
            background-color: var(--sidebar-link-color);
        }

        .btn-toggle-nav2 a {
            padding: .25rem .5rem;
            margin-top: .125rem;
            margin-left: 1.25rem;
        }

        .btn-toggle-nav2 a:hover,
        .btn-toggle-nav2 a:focus,
        .btn-toggle-nav2 a.active {
            background-color: var(--sidebar-link-color);
        }
    }
}