@sandlada/vue-mdc/src/components/labs/bottom-app-bar/base.module.css


.container {
    --_current-container-color: var(--variant-container-color-enabled);
    --variant-container-color-enabled: var(--glare-ui-shared-bottom-app-bar-container-color-enabled, var(--_access-shared-bottom-app-bar-container-color-enabled, var(--md-sys-color-surface-container)));

    --_current-elevation-level: var(--variant-elevation-level-disabled);
    --variant-elevation-level-enabled: var(--glare-ui-shared-bottom-app-bar-elevation-level-enabled, var(--_access-shared-bottom-app-bar-elevation-level-enabled, 1));
    --variant-elevation-level-disabled: var(--glare-ui-shared-bottom-app-bar-elevation-level-disabled, var(--_access-shared-bottom-app-bar-elevation-level-disabled, 0));
    --_access-shared-elevation-level: var(--_current-elevation-level);
    
    --height: var(--glare-ui-shared-bottom-app-bar-height, var(--_access-shared-bottom-app-bar-height, 56px));
    min-height: var(--height);
    height: calc(var(--height) + 8px + 8px);
    width: 100%;

    position: relative;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 8px;
    padding-bottom: 8px;
}

.background {
    position: absolute;
    inset: 0;
    background-color: var(--_current-container-color);

}
.button-group {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 8px;
    overflow: auto;
    flex-grow: 1;
}
.action-button {
    z-index: 1;
    height: var(--_current-action-button-height);
    width: var(--_current-action-button-width);
    flex-grow: 0;
    flex-shrink: 0  ;
}
.action-button-wrapper {
    height: 100%;
    width: 100%;
    position: relative;
    display: grid;
    place-content: center;
}

.enable-elevation {
    --_current-elevation-level: var(--variant-elevation-level-enabled);
}