@import "./_variables.scss";

$item-radius: 6px;
$padding-y: 15px;
$color-active: #00284b;

.navbar {
    background-color: #0050A0;
    border-radius: 0;
    border: none;
    font-size: 18px;
    margin-bottom: 0;
    margin-left: -$body-padding-x;
    margin-right: -$body-padding-x;
    min-height: initial;
    padding-left: $body-padding-x;
    padding-right: $body-padding-x;
    padding-top: 1rem;
    padding-bottom: 2rem;
    @include display-flex;
    @include justify-content(center);


    .navbar-brand {
        color:#fff;
        font-weight: bold;
        padding-bottom: $padding-y;
        margin-right: 40px;

        @media (max-width: 1096px) {
            margin-right: 0px;
            font-size: 16px;
            width: 130px;
        }

        &:hover {
            color: #fff;
        }
    }
    .nav {
        @include display-flex;
        @include justify-content(flex-start);
        @include align-items(flex-end);

        border-bottom: 0;
        float: none;

        .nav-item {
            border-bottom: 1px solid #fff;
            a {
                @include display-flex;
                @include flex-direction(column);
                @include justify-content(space-between);
                @include align-items(center);

                border-top-right-radius: $item-radius;
                border-top-left-radius: $item-radius;
                border-bottom: none !important;
                color:#fff;
                margin-bottom: 0;
                margin-right: -1px;
                padding: $padding-y 20px;
                transition: all 0.2s ease-in-out;
                &:hover {
                    background-color: $color-active;
                    border-color: $color-active;
                    color: #fff;
                }
            }

            &.active a {
                background-color: #fff;
                border-color: #fff;
                color: $color-active;
            }
        }
        .connection {
            font-weight: bolder;

            .text {
                color: #fff;
            }
        }

        .navbar-right button {
            color: #fff !important;
        }
    }
}