Asymmetrik/ngx-starter

@import '../../../styles/shared';

$header-banner-bg: #212121 !default;
$header-banner-color: #ffffff !default;

$footer-banner-bg: #212121 !default;
$footer-banner-color: #ffffff !default;

$skip-link-z-index: 10002 !default;

:host {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: auto;
}

.site-body {
    flex: 1 1;
    overflow: auto;
}

.site-banner {
    text-align: center;
    width: 100%;
}

.copyright-banner {
    background-color: var(--bs-tertiary-bg);
}

.footer-banner {
    background-color: $footer-banner-bg;
    color: $footer-banner-color;
}

.header-banner {
    background-color: $header-banner-bg;
    color: $header-banner-color;
}

.site-content {
    padding: $site-content-padding-y $site-content-padding-x;
}

a.skip-link {
    position: absolute;
    top: -1000em;

    &:focus {
        position: fixed;
        top: 0;
        left: 0;
        z-index: $skip-link-z-index;

        padding: 10px;
        background-color: var(--bs-body-bg);
        text-decoration: underline;
    }
}