@use "themer";
@use "sass:color";
@use "~/node_modules/bootstrap/scss/bootstrap";

header > nav {
    @extend .navbar-expand-lg;
    @extend .navbar;
    @extend .border-bottom;
    @include themer.themed {
        background-color: themer.color-of("navbar");
    }

    .nav-link, .navbar-brand {
        @include themer.themed {
            color: themer.color-of("bold");
        }
        &.active {
            @include themer.themed {
                color: themer.color-of("text");
            }
        }
    }

    .navbar-toggler {
        .bi-list {
            font-size: 1.5rem;
        }
    }
}

main {
    flex-grow: 1;
    display: flex;
    flex-direction: column;

    .tear {
        @extend .p-3;
        border-top: 1px;
        border-top-style: solid;
        border-bottom: 1px;
        border-bottom-style: solid;
        @include themer.themed {
            $tear: themer.color-of("background");
            border-color: adjust-color($color: $tear, $lightness: -12%, $alpha: 1.0);
            background-color: adjust-color($color: $tear, $lightness: -5%, $alpha: 1.0);
        }
    }
}

footer {
    @extend .text-center;
    @extend .border-top;
    @extend .py-2;
    @include themer.themed {
        background-color: themer.color-of("footer");
        color: themer.color-of("muted");
    }

    a {
        @include themer.themed {
            color: themer.color-of("muted");
        }
    }

    width: 100%;
}

.jumbotron {
    @extend .container-fluid;
    @extend .p-4;
    @include themer.themed {
        background-color: themer.color-of("main");
    }

    &.sub {
        @include themer.themed {
            background-color: themer.color-of("sub");
        }
    }
}

.concise {
    max-width: 630px;
    width: inherit;
}

.less-concise {
    max-width: 720px;
    width: inherit;
}

hr.concise {
    @extend .my-3;
    @include themer.themed {
        color: themer.color-of("bold");
    }
    width: 15%;
    max-width: 160px;
    min-width: 32px;
    margin-left: auto;
    margin-right: auto;
    height: 2px;
}

html {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    @include themer.themed {
        background-color: themer.color-of("background");
        color: themer.color-of("text");
    }
}