.app-header {
    @extend .position-fixed;
    @extend .top-0;
    @extend .end-0;
    @extend .bottom-0;
    left: var(--bs-app-sidebar-width);
    height: $header-height;
    @extend .p-3;
    background-color: rgba($white, 0);
    backdrop-filter: blur($spacer);
    @extend .rounded-bottom;
    z-index: 8;

    .app-header-container {
        @extend .py-2;
        @extend .h-100;
        @extend .d-flex;
        @extend .align-items-center;
        @extend .justify-content-between;
        @extend .gap-3;

        &::after {
            content: "";
            @extend .position-absolute;
            @extend .bottom-0;
            width: calc(100% - 32px);
            @extend .border-bottom;
        }
    }
}