@import "colors.scss";

// Always use the dark-scheme colors for the navigation bar.
$bar-background-color: color-get('dark', 'carbs-color-bg') !default
$bar-foreground-color: color-get('dark', 'carbs-color-fg') !default;
$bar-carbs-pink:       color-get('dark', 'carbs-pink') !default;

$navbar-background-color: color-get('dark', 'carbs-blue') !default
$navbar-foreground-color: color-get('dark', 'carbs-color-fg') !default;

$bar-border: 5px solid $navbar-background-color !default;
$bar-font-size: 14px !default;
$bar-font-text: $font-text !default;

$bar-title-height: 40px;
$bar-title-width: 190px;

$bar-margin: 2em;

#preamble {
    margin-bottom: $bar-margin;
}

#titlebar {
    box-sizing: content-box;
    background: $bar-background-color none repeat scroll 0 0 !important;
    min-height: $bar-title-height;
    padding: 10px 15px !important;
    a.maintitle {
        margin: 0 !important;
        padding: 0 !important;
        color: $bar-carbs-pink !important;
        float: left !important;
        font-weight: bolder !important;
        font-size: 200% !important;
        &:hover {
            text-decoration: none;
            color: $bar-carbs-pink;
        }
    }
}

#navbar {
    background: $navbar-background-color !important;
    clear: both;
    padding: .3em;

    #navbarlist li a {
        color: $navbar-foreground-color;
        font-weight: bold;
        text-decoration: none;
    }

    ul {
        vertical-align: middle;
        list-style: none;
        margin: 0;
        padding: 0;
        text-align: left;
        font-size: 0;
        display: flex;
        justify-content: space-evenly;
        li {
            display: inline;
            text-align: justify;
            font-size: $bar-font-size;
            font-family: $bar-font-text !important;
            line-height: 1.4;
            letter-spacing: 0;
            padding: 0.7ex;
            margin: 0;
            a {
                color: $bar-foreground-color;
                font-weight: bold;
                text-decoration: none;
            }
            a:hover {
                color: color-get('dark', 'carbs-color-bg') !important;
                text-decoration: none !important;
            }
        }
    }
}

footer {
    clear: both;
    margin-top: $bar-margin;
    background: $bar-background-color none repeat scroll 0 0 !important;
    border-top: $bar-border !important;
    padding: 10px 15px !important;
    bottom: 0;
    p {
        text-align: center;
        color: $bar-foreground-color;
    }
}