// https://m3.material.io/components/bottom-app-bar/specs

.sd-bottom_app_bar {
    width: 100%;
    box-sizing: border-box;
    height: 80px;
    padding: 12px 16px 12px 4px;
    overflow: hidden;
    background: var(--md-sys-color-surface-container);
    @include elevation-level2;

    display: flex;
    align-items: center;
    justify-content: space-between;

    &-buttons {
        display: flex;
        gap: 0.25rem;
    }
    &-fab {
        user-select: none;
    }
}

// https://m3.material.io/components/top-app-bar/specs

.sd-top_app_bar {
    background: var(--md-sys-color-surface);
    box-sizing: border-box;
    width: 100%;
    padding: 0 8px;
    display: flex;
    flex-direction: column;

    &-helper {
        box-sizing: border-box;
        height: 64px;
        display: flex;
        gap: 1rem;
        align-items: center;
        justify-content: space-between;
    }

    &-leading_navigation_icon {
        flex-shrink: 0;
        font-size: 24px;
    }

    &-trailing_icon {
        flex-shrink: 0;
        display: flex;
        gap: 2px;
        font-size: 24px;
    }

    &-headline {
        font-size: 22px;
        font-weight: 400;
        color: var(--md-sys-color-on-surface);
        flex-shrink: 1;
    }

    &[data-sd='small'] {
        .sd-top_app_bar-headline {
            margin-right: auto;
        }
    }
    &[data-sd='medium'] {
        height: 112px;
        .sd-top_app_bar-headline {
            width: 100%;
            padding-left: 16px;
            padding-bottom: 24px;
            font-size: 24px;
            margin-top: auto;
        }
    }

    &[data-sd='large'] {
        height: 152px;
        .sd-top_app_bar-headline {
            width: 100%;
            padding-left: 16px;
            padding-bottom: 28px;
            font-size: x-large;
            margin-top: auto;
        }
    }
}