@use "sass:map";
@import '_variables';
@import '_mixins';

// Bootstrap overrides
html,
body {
    height: 100%;
    background-color: $gray-700;
    color: $white;
}

.text-lightish {
    color: $gray-300;
}

.bg-lightish {
    background-color: $gray-300;
}

.font-weight-semibold {
    font-weight: 600;
}

.jumbotron-font-1 {
    font-size: 2rem;

    @media screen and (min-width: 576px) {
        font-size: 2.5rem;
    }

    @media screen and (min-width: 768px) {
        font-size: 4rem;
    }
}

.jumbotron-font-2 {
    font-size: 1.5rem;

    @media screen and (min-width: 576px) {
        font-size: 1.75rem;
    }

    @media screen and (min-width: 768px) {
        font-size: 3rem;
    }
}

.jumbotron-font-3 {
    font-size: 1rem;

    @media screen and (min-width: 576px) {
        font-size: 1.125rem;
    }

    @media screen and (min-width: 768px) {
        font-size: 1.75rem;
    }
}

.navbar {
    position: sticky;
    top: 0;
    z-index: 1071;
    min-height: 4rem;
    background-color: $gray-900;
    box-shadow: 0 0.5rem 1rem rgba($black, .05), inset 0 -1px 0 rgba($white, .1);
    margin-bottom: 0rem;
    display: flex;
    align-items: center;

    .navbar-brand {
        font-weight: 600;
        margin-bottom: 0rem;
    }

    .vertical-divider {
        width: 2px;
        height: 2rem;
        background-color: rgba($white, .5);
        margin-right: 1rem;
    }

    .nav-link,
    .nav-item {
        padding: .25rem .0rem;
        font-weight: 600;
        color: rgba($white, .5);
        background-color: transparent;
        text-decoration: none;
    }

    .nav-link.active {
        color: $white;
    }
}

.sidebar {
    position: sticky;
    top: 4rem;
    z-index: 1000;
    height: auto;
    display: flex;

    @media screen and (min-width: 768px) {
        height: calc(100vh - 4rem);
    }

    .nav-item {
        margin-bottom: .25rem;

        .nav-link {
            font-size: 1.125rem;
            font-weight: 500;
            color: rgba($white, .5);
            text-decoration: none;
        }

        &.active {
            background-color: $gray-700;
            border-radius: .25rem;
            border-right: solid 3px $primary;
            .nav-link {
                color: $white;
                font-weight: 700;
            }
        }
    }
}

.main-content {
    padding: 1rem;
    max-height: calc(100vh - 4rem);
    overflow-y: scroll;
}

.resume-card-title {
    color: $gray-900;
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    padding: 0rem;
    text-decoration-line: none;
    text-align: left;

    &:hover,
    &:focus {
        color: $gray-900;
        text-decoration-line: none;
        box-shadow: none;
    }
}

.rotate-on-selected-180 {
    transform: rotate(0deg);
    transition: transform 0.5s;
}

.selected .rotate-on-selected-180 {
    transform: rotate(180deg);
    transition: transform 0.5s;
}


[role="button"],
a.nav-link,
a.nav-item {
    cursor: pointer;
}

.disabled,
:disabled {
    cursor: not-allowed;
}

h6, .h6 {
    font-weight: 600;
}

.exclude-stretched-link {
    z-index: 2;
    position: relative;
}

.card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: $gray-900;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    color: $white;
    font-size: 2.25rem;
    font-weight: 300;
    opacity: 0.75;
    cursor: not-allowed;
}