@mixin appbar() {
    header.header {
        z-index: 1022;
    }

    .appbar {
        width: 100%;
        display: flex;
        flex-shrink: 0;
        flex-direction: column;

        h5 {
            font-size: 1.25rem;
        }
    }

    .appbar-inherit {
        color: inherit;
        background-color: inherit;
    }

    @media (min-width: $breakpoint-md) {
        .appbar > .toolbar {
            min-height: 64px;
        }

        .appbar > .toolbar-md {
            min-height: 48px;
        }

        .appbar > .toolbar-sm {
            min-height: 38px;
        }
    }

    .appbar-fixed {
        top: 0;
        left: auto;
        right: 0;
        position: fixed;
    }

    .appbar-bottom {
        top: auto;
        bottom: 0;
    }

    @media print {
        .appbar-fixed {
            position: absolute;
        }
    }

    .appbar-absolute {
        top: 0;
        left: auto;
        right: 0;
        position: absolute;
    }

    .appbar-sticky {
        top: 0;
        left: auto;
        right: 0;
        position: sticky;
    }

    .appbar-title {
        padding: 0.5rem;
        margin: 0;
        flex-grow: 1;
    }

    .appbar-prominent {
        .toolbar {
            min-height: 200px;
            align-items: flex-start;
            padding-top: 8px;
            padding-bottom: 16px;
        }

        .appbar-title {
            align-self: flex-end;
            font-size: 1.5rem;
        }
    }

    .appbar-prominent-lg {
        .toolbar {
            min-height: 256px;
        }
    }

    .appbar-prominent-sm {
        .toolbar {
            min-height: 128px;
        }
    }
}

@mixin appbarTheme($palette) {
    $text: map-deep-get($palette, text, main);
    $text-primary: map-deep-get($palette, text, primary);
    $bg: map-deep-get($palette, bg, main);

    $primary-palette: map-get($palette, primary);
    $primary: map-get($primary-palette, main);
    $primary-text: map-get($primary-palette, text);

    $secondary-palette: map-get($palette, secondary);
    $secondary: map-get($secondary-palette, main);
    $secondary-text: map-get($secondary-palette, text);

    $bg-shell: map-get($palette, primary, light);
    $bg-shell: mix(#000, $bg-shell, 50%);

    .appbar-default {
        color: $text-primary;
        background-color: mix($text, $bg, 5%);
    }

    .appbar-primary {
        color: $primary-text;
        background-color: $primary;
    }

    .appbar-secondary {
        color: $secondary-text;
        background-color: $secondary;
    }

    .appbar-shell {
        color: #fff !important;
        background-color: $bg-shell !important;

        // .btn {
        //     color: inherit !important;
        // }
    }
}

@include appbar();

.theme-bd.theme-light {
    $palette: map-get($theme, light);
    @include appbarTheme($palette);
}

.theme-bd.theme-dark {
    $palette: map-get($theme, dark);
    @include appbarTheme($palette);
}