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


.container {
    --_current-elevation-color: var(--variant-elevation-color-enabled);
    --elevation-color: var(--_current-elevation-color);
    --variant-elevation-color-enabled: var(--glare-ui-shared-top-app-bar-elevation-color-enabled, var(--_access-shared-top-app-bar-elevation-color-enabled, var(--md-sys-color-shadow, #000000)));
    --variant-elevation-color-on-scroll: var(--glare-ui-shared-top-app-bar-elevation-color-on-scroll, var(--_access-shared-top-app-bar-elevation-color-on-scroll, var(--md-sys-color-shadow, #000000)));
    
    --_current-elevation-level: var(--variant-elevation-level-disabled);
    --variant-elevation-level-disabled: var(--glare-ui-shared-top-app-bar-elevation-level-disabled, var(--_access-shared-top-app-bar-elevation-level-disabled, 0));
    --variant-elevation-level-on-top: var(--glare-ui-shared-top-app-bar-elevation-level-on-top, var(--_access-shared-top-app-bar-elevation-level-on-top, 2));
    --variant-elevation-level-on-scroll: var(--glare-ui-shared-top-app-bar-elevation-level-on-scroll, var(--_access-shared-top-app-bar-elevation-level-on-scroll, 2));
    --variant-elevation-level-always: var(--glare-ui-shared-top-app-bar-elevation-level-always, var(--_access-shared-top-app-bar-elevation-level-always, 2));
    
    --_access-shared-elevation-color: var(--_current-elevation-color);
    --_access-shared-elevation-level: var(--_current-elevation-level);

    --_current-position: var(--variant-position-enabled);
    --position: var(--_current-position);
    --variant-position-enabled: var(--glare-ui-shared-top-app-bar-position-enabled, var(--_access-shared-top-app-bar-position-enabled, relative));
    --variant-position-on-scroll: var(--glare-ui-shared-top-app-bar-position-on-scroll, var(--_access-shared-top-app-bar-position-on-scroll, sticky));
    
    --_current-top: var(--shared-top-enabled);
    --top: var(--_current-top);
    --variant-top-enabled: var(--glare-ui-shared-top-app-bar-top-enabled, var(--_access-shared-top-app-bar-top-enabled, 0px));
    --variant-top-on-scroll: var(--glare-ui-shared-top-app-bar-top-on-scroll, var(--_access-shared-top-app-bar-top-on-scroll, 0px));

    --_current-z-index: var(--variant-z-index-enabled);
    --z-index: var(--_current-z-index);
    --variant-z-index-enabled: var(--glare-ui-shared-top-app-bar-z-index-enabled, var(--_access-shared-top-app-bar-z-index-enabled, 0));
    --variant-z-index-on-scroll: var(--glare-ui-shared-top-app-bar-z-index-on-scroll, var(--_access-shared-top-app-bar-z-index-on-scroll, 1));

    --_current-transition-duration: var(--variant-transition-duration-enabled);
    --transition-duration: var(--_current-transition-duration);
    --variant-transition-duration-enabled: var(--glare-ui-shared-top-app-bar-transition-duration-enabled, var(--_access-shared-top-app-bar-transition-duration-enabled, 250ms));
    --variant-transition-duration-on-scroll: var(--glare-ui-shared-top-app-bar-transition-duration-on-scroll, var(--_access-shared-top-app-bar-transition-duration-on-scroll, 250ms));
    --_current-transition-timing-function: var(--variant-transition-timing-function-enabled);
    --transition-timing-function: var(--_current-transition-timing-function);
    --variant-transition-timing-function-enabled: var(--glare-ui-shared-top-app-bar-transition-timing-function-enabled, var(--_access-shared-top-app-bar-transition-timing-function-enabled, ubic-bezier(0.2, 0, 0, 1)));
    --variant-transition-timing-function-on-scroll: var(--glare-ui-shared-top-app-bar-transition-timing-function-on-scroll, var(--_access-shared-top-app-bar-transition-timing-function-on-scroll, ubic-bezier(0.2, 0, 0, 1)));

    --_access-shared-component-icon-button-touch-target-size: var(--glare-ui-shared-top-app-bar-icon-button-touch-target-size, 48px);

    --width: var(--glare-ui-shared-top-app-bar-width, var(--_access-shared-top-app-bar-width, auto));
    --height: var(--glare-ui-shared-top-app-bar-height, var(--_access-shared-top-app-bar-height, 64px));
    --shape: var(--glare-ui-shared-top-app-bar-shape, var(--_access-shared-top-app-bar-shape, 0px));
    --padding-top: var(--glare-ui-shared-top-app-bar-padding-top, var(--_access-shared-top-app-bar-padding-top, 0px));
    --padding-bottom: var(--glare-ui-shared-top-app-bar-padding-bottom, var(--_access-shared-top-app-bar-padding-bottom, 0px));
    --padding-left: var(--glare-ui-shared-top-app-bar-padding-left, var(--_access-shared-top-app-bar-padding-left, 16px));
    --padding-right: var(--glare-ui-shared-top-app-bar-padding-right, var(--_access-shared-top-app-bar-padding-right, 16px));
    --gap: var(--glare-ui-shared-top-app-bar-gap, var(--_access-shared-top-app-bar-gap, 24px));

    width: var(--width);
    height: var(--height);
    border-radius: var(--shape);
    z-index: var(--z-index);
    position: var(--position);
    top: var(--top);
    padding-top: var(--padding-top);
    padding-bottom: var(--padding-bottom);
    padding-left: var(--padding-left);
    padding-right: var(--padding-right);

    display: flex;

    flex-grow: 0;
    flex-shrink: 0;
}
.container.on-scroll {
    --_current-elevation-color: var(--variant-elevation-color-on-scroll);
    --_current-transition-timing-function: var(--variant-transition-timing-function-on-scroll);
    --_current-transition-duration: var(--variant-transition-duration-on-scroll);
    --_current-position: var(--variant-position-on-scroll);
    --_current-top: var(--variant-top-on-scroll);
    --_current-z-index: var(--variant-z-index-on-scroll);
}

.container,
.background,
.outline {
    transition-property: background-color, color, border, opacity;
    transition-duration: var(--transition-duration);
    transition-timing-function: var(--transition-timing-function);
}

.background,
.outline {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    grid-column: 0;
}

.background {
    --_current-container-color: var(--variant-container-color-enabled);
    --shared-container-color: var(--_current-container-color);
    --variant-container-color-enabled: var(--glare-ui-shared-top-app-bar-container-color-enabled, var(--_access-shared-top-app-bar-container-color-enabled, var(--md-sys-color-surface, #FEF7FF)));
    --variant-container-color-on-scroll: var(--glare-ui-shared-top-app-bar-container-color-on-scroll, var(--_access-shared-top-app-bar-container-color-on-scroll, var(--md-sys-color-surface-container, #F3EDF7)));

    --_current-container-opacity: var(--variant-container-opacity-enabled);
    --shared-container-opacity: var(--_current-container-opacity);
    --variant-container-opacity-enabled: var(--glare-ui-shared-top-app-bar-container-opacity-enabled, var(--_access-shared-top-app-bar-container-opacity-enabled, 1));
    --variant-container-opacity-on-scroll: var(--glare-ui-shared-top-app-bar-container-opacity-on-scroll, var(--_access-shared-top-app-bar-container-opacity-on-scroll, 1));

    background-color: var(--_current-container-color);
    opacity: var(--_current-container-opacity);
}
.container.on-scroll>.background {
    --_current-container-color: var(--variant-container-color-on-scroll);
    --_current-container-opacity: var(--variant-container-opacity-on-scroll);
}

.outline {
    --_current-outline-color: var(--variant-outline-color-enabled);
    --outline-color: var(--_current-outline-color);
    --variant-outline-color-enabled: var(--glare-ui-shared-top-app-bar-outline-color-enabled, var(--_access-shared-top-app-bar-outline-color-enabled, var(--md-sys-color-outline, #79747E)));
    --variant-outline-color-on-scroll: var(--glare-ui-shared-top-app-bar-outline-color-on-scroll, var(--_access-shared-top-app-bar-outline-color-on-scroll, var(--md-sys-color-outline, #79747E)));

    --_current-outline-opacity: var(--variant-outline-opacity-enabled);
    --outline-opacity: var(--_current-outline-opacity);
    --variant-outline-opacity-enabled: var(--glare-ui-shared-top-app-bar-outline-opacity-enabled, var(--_access-shared-top-app-bar-outline-opacity-enabled, 1));
    --variant-outline-opacity-on-scroll: var(--glare-ui-shared-top-app-bar-outline-opacity-on-scroll, var(--_access-shared-top-app-bar-outline-opacity-on-scroll, 1));

    --_current-outline-style: var(--variant-outline-style-enabled);
    --outline-style: var(--_current-outline-style);
    --variant-outline-style-enabled: var(--glare-ui-shared-top-app-bar-outline-style-enabled, var(--_access-shared-top-app-bar-outline-style-enabled, solid));
    --variant-outline-style-on-scroll: var(--glare-ui-shared-top-app-bar-outline-style-on-scroll, var(--_access-shared-top-app-bar-outline-style-on-scroll, solid));

    --_current-outline-width: var(--variant-outline-width-enabled);
    --outline-width: var(--_current-outline-width);
    --variant-outline-width-enabled: var(--glare-ui-shared-top-app-bar-outline-width-enabled, var(--_access-shared-top-app-bar-outline-width-enabled, 0px));
    --variant-outline-width-on-scroll: var(--glare-ui-shared-top-app-bar-outline-width-on-scroll, var(--_access-shared-top-app-bar-outline-width-on-scroll, 0px));

    border-style: var(--outline-style);
    border-width: var(--outline-width);
    border-color: var(--outline-color);
    opacity: var(--outline-opacity);
}
.container.on-scroll>.outline {
    --_current-outline-color: var(--variant-outline-color-on-scroll);
    --_current-outline-opacity: var(--variant-outline-opacity-on-scroll);
    --_current-outline-style: var(--variant-outline-style-on-scroll);
    --_current-outline-width: var(--variant-outline-width-on-scroll);
}

.headline {
    --headline-font: var(--glare-ui-shared-top-app-bar-headline-font, var(--_access-shared-top-app-bar-headline-font, var(--md-sys-typescale-title-large-font, Roboto)));
    --headline-line-height: var(--glare-ui-shared-top-app-bar-headline-line-height, var(--_access-shared-top-app-bar-headline-line-height, var(--md-sys-typescale-title-large-line-height, 28px)));
    --headline-font-size: var(--glare-ui-shared-top-app-bar-headline-font-size, var(--_access-shared-top-app-bar-headline-font-size, var(--md-sys-typescale-title-large-font-size, 22px)));
    --headline-letter-spacing: var(--glare-ui-shared-top-app-bar-headline-letter-spacing, var(--_access-shared-top-app-bar-headline-letter-spacing, var(--md-sys-typescale-title-large-letter-spacing, 0px)));
    --headline-font-weight: var(--glare-ui-shared-top-app-bar-headline-font-weight, var(--_access-shared-top-app-bar-headline-font-weight, var(--md-sys-typescale-title-large-font-weight, 400)));
    --headline-color: var(--glare-ui-shared-top-app-bar-headline-color, var(--_access-shared-top-app-bar-headline-color, var(--md-sys-color-on-surface, #1D1B20)));
    --headline-padding-left: var(--glare-ui-shared-top-app-bar-headline-padding-left, var(--_access-shared-top-app-bar-headline-padding-left, 0px));
    --headline-padding-right: var(--glare-ui-shared-top-app-bar-headline-padding-right, var(--_access-shared-top-app-bar-headline-padding-right, 0px));

    font-family: var(--headline-font);
    line-height: var(--headline-line-height);
    font-size: var(--headline-font-size);
    letter-spacing: var(--headline-letter-spacing);
    font-weight: var(--headline-font-weight);
    color: var(--headline-color);
    padding-left: var(--headline-padding-left);
    padding-right: var(--headline-padding-right);
    position: relative;
    z-index: 0;

    grid-column: 2;
}

.leading-icon {
    --icon-size: var(--glare-ui-shared-top-app-bar-icon-size, 24px);
    --icon-color: var(--glare-ui-shared-top-app-bar-icon-color, var(--md-sys-color-on-surface, #1D1B20));

    --_access-shared-component-icon-button-icon-color-enabled: var(--icon-color);
    --_access-shared-component-icon-button-icon-size: var(--icon-size);
}
.trailing-icons,
.trailing-icon {
    --icon-size: var(--glare-ui-shared-top-app-bar-icon-size, 24px);
    --icon-color: var(--glare-ui-shared-top-app-bar-icon-color, var(--md-sys-color-on-surface-variant, #49454F));

    --_access-shared-component-icon-button-icon-color-enabled: var(--icon-color);
    --_access-shared-component-icon-button-icon-size: var(--icon-size);
}

.trailing-icons {
    display: flex;
    gap: 8px;
}

.container>:is(.center-aligned-grid) {
    gap: var(--gap);
}
.container>:is(.center-aligned-grid, .small-grid, .medium-grid, .large-grid) {
    display: grid;
    width: 100%;
    height: 100%;
    justify-content: space-between;
}
.container>:is(.medium-grid, .large-grid)>.headline {
    height: 100%;
    display: inline-flex;
    align-items: end;
}

.container>.center-aligned-grid {
    grid-template-columns: 40px 1fr 40px;
    align-items: center;
}
.container>.center-aligned-grid>.headline {
    width: 100%;
    text-align: center;
}
.container>.small-grid {
    grid-template-columns: 40px 1fr auto;
    align-items: center;
}
.container>.medium-grid,
.container>.large-grid {
    grid-template-columns: 40px 1fr;
    grid-template-rows: auto;
    align-items: start;
}
.container>.medium-grid>.leading-icon,
.container>.large-grid>.leading-icon {
    grid-column: 1;
    grid-row: 1;
}
.container>.medium-grid>.trailing-icons,
.container>.large-grid>.trailing-icons {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    justify-content: end;
}
.container>.medium-grid>.headline,
.container>.large-grid>.headline {
    grid-column: 1 / span 2;
    grid-row: 2;
}

.responsive-grid {
    display: grid;
    grid-template-columns: 48px 1fr auto;
}

.container.always-shadow {
    --_current-elevation-level: var(--variant-elevation-level-always);
}
.container.on-scroll.on-scroll-shadow {
    --_current-elevation-level: var(--variant-elevation-level-on-scroll);
}
.container:not(.on-scroll).on-top-shadow {
    --_current-elevation-level: var(--variant-elevation-level-on-top);
}