/* /Layout/MainLayout.razor.rz.scp.css */
.sg-shell[b-cvqkai8u6r] {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

/* The bar is fixed to the bottom of the viewport rather than the document, so it stays
   put while content scrolls, and is centred with the app shell on wider screens. */
[b-cvqkai8u6r] .sg-tabbar {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: var(--sg-app-width);
    height: calc(var(--sg-tabbar-height) + var(--sg-safe-bottom));
    padding-bottom: var(--sg-safe-bottom);
    display: flex;
    background-color: var(--sg-white);
    border-top: 1px solid var(--sg-divider-primary);
    z-index: 100;
}

[b-cvqkai8u6r] .sg-tabbar__item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    background: none;
    border: none;
    padding: 6px 2px;
    cursor: pointer;

    /* MyShellRenderer set unselected items to Gray and selected to the tab bar's
       foreground colour. */
    color: var(--sg-gray-darker);
    font-family: var(--sg-font-body);
    font-size: 11px;
}

[b-cvqkai8u6r] .sg-tabbar__item--active {
    color: var(--sg-blue);
}

[b-cvqkai8u6r] .sg-tabbar__icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    /* Unselected icons are dimmed to match the native tint. */
    opacity: 0.6;
}

[b-cvqkai8u6r] .sg-tabbar__item--active .sg-tabbar__icon {
    opacity: 1;
}

[b-cvqkai8u6r] .sg-tabbar__label {
    line-height: 1;
}