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


.center-aligned,
.small {
    --_access-shared-top-app-bar-padding-top:     var(--glare-ui-top-app-bar-padding-top, 0px);
    --_access-shared-top-app-bar-padding-bottom:  var(--glare-ui-top-app-bar-padding-bottom, 0px);
    --_access-shared-top-app-bar-padding-left:    var(--glare-ui-top-app-bar-padding-left, 16px);
    --_access-shared-top-app-bar-padding-right:   var(--glare-ui-top-app-bar-padding-right, 16px);
    --_access-shared-top-app-bar-height:          var(--glare-ui-top-app-bar-height, 64px);

    --_access-shared-top-app-bar-headline-font:            var(--glare-ui-top-app-bar-headline-font);
    --_access-shared-top-app-bar-headline-line-height:     var(--glare-ui-top-app-bar-headline-line-height);
    --_access-shared-top-app-bar-headline-font-size:       var(--glare-ui-top-app-bar-headline-font-size);
    --_access-shared-top-app-bar-headline-letter-spacing:  var(--glare-ui-top-app-bar-headline-letter-spacing);
    --_access-shared-top-app-bar-headline-font-weight:     var(--glare-ui-top-app-bar-headline-font-weight);
}

.center-aligned {
    --_access-shared-top-app-bar-gap:             var(--glare-ui-top-app-bar-gap, 24px);
    --_access-shared-top-app-bar-headline-padding-left:    var(--glare-ui-top-app-bar-headline-padding-left);
    --_access-shared-top-app-bar-headline-padding-right:   var(--glare-ui-top-app-bar-headline-padding-right);
}

.medium {
    --_access-shared-top-app-bar-padding-top:     var(--glare-ui-top-app-bar-padding-top, 20px);
    --_access-shared-top-app-bar-padding-bottom:  var(--glare-ui-top-app-bar-padding-bottom, 24px);
    --_access-shared-top-app-bar-padding-left:    var(--glare-ui-top-app-bar-padding-left, 16px);
    --_access-shared-top-app-bar-padding-right:   var(--glare-ui-top-app-bar-padding-right, 16px);
    --_access-shared-top-app-bar-height:          var(--glare-ui-top-app-bar-height, 112px);

    --_access-shared-top-app-bar-headline-font: var(--glare-ui-top-app-bar-headline-font, var(--md-sys-typescale-headline-small-font, Roboto));
    --_access-shared-top-app-bar-headline-line-height: var(--glare-ui-top-app-bar-headline-line-height, var(--md-sys-typescale-headline-small-line-height, 32px));
    --_access-shared-top-app-bar-headline-font-size: var(--glare-ui-top-app-bar-headline-font-size, var(--md-sys-typescale-headline-small-font-size, 24px));
    --_access-shared-top-app-bar-headline-letter-spacing: var(--glare-ui-top-app-bar-headline-letter-spacing, var(--md-sys-typescale-headline-small-letter-spacing, 0px));
    --_access-shared-top-app-bar-headline-font-weight: var(--glare-ui-top-app-bar-headline-font-weight, var(--md-sys-typescale-headline-small-font-weight, 400));

}
.large {
    --_access-shared-top-app-bar-padding-top:     var(--glare-ui-top-app-bar-padding-top, 20px);
    --_access-shared-top-app-bar-padding-bottom:  var(--glare-ui-top-app-bar-padding-bottom, 28px);
    --_access-shared-top-app-bar-padding-left:    var(--glare-ui-top-app-bar-padding-left, 16px);
    --_access-shared-top-app-bar-padding-right:   var(--glare-ui-top-app-bar-padding-right, 16px);

    --_access-shared-top-app-bar-headline-font: var(--glare-ui-top-app-bar-headline-font, var(--md-sys-typescale-headline-medium-font, Roboto));
    --_access-shared-top-app-bar-headline-line-height: var(--glare-ui-top-app-bar-headline-line-height, var(--md-sys-typescale-headline-medium-line-height, 36px));
    --_access-shared-top-app-bar-headline-font-size: var(--glare-ui-top-app-bar-headline-font-size, var(--md-sys-typescale-headline-medium-font-size, 280px));
    --_access-shared-top-app-bar-headline-letter-spacing: var(--glare-ui-top-app-bar-headline-letter-spacing, var(--md-sys-typescale-headline-medium-letter-spacing, 0px));
    --_access-shared-top-app-bar-headline-font-weight: var(--glare-ui-top-app-bar-headline-font-weight, var(--md-sys-typescale-headline-medium-font-weight, 400));

    --_access-shared-top-app-bar-height:          var(--glare-ui-top-app-bar-height, 152px);
}

.small,
.medium,
.large {
    --_access-shared-top-app-bar-gap:             var(--glare-ui-top-app-bar-gap, 0px);
    --_access-shared-top-app-bar-headline-padding-left:    var(--glare-ui-top-app-bar-headline-padding-left, 8px);
    --_access-shared-top-app-bar-headline-padding-right:   var(--glare-ui-top-app-bar-headline-padding-right, 0px);
}

.medium,
.large {
    --_access-shared-top-app-bar-elevation-level-enabled:   var(--glare-ui-top-app-bar-elevation-level-enabled, 0);
    --_access-shared-top-app-bar-elevation-level-on-scroll: var(--glare-ui-top-app-bar-elevation-level-on-scroll, 0);
}

.center-aligned,
.small,
.medium,
.large {
    --_access-shared-top-app-bar-position-enabled:              var(--glare-ui-top-app-bar-position-enabled);
    --_access-shared-top-app-bar-position-on-scroll:            var(--glare-ui-top-app-bar-position-on-scroll);
    --_access-shared-top-app-bar-top-enabled:                   var(--glare-ui-top-app-bar-top-enabled);
    --_access-shared-top-app-bar-top-on-scroll:                 var(--glare-ui-top-app-bar-top-on-scroll);
    --_access-shared-top-app-bar-z-index-enabled:               var(--glare-ui-top-app-bar-z-index-enabled);
    --_access-shared-top-app-bar-z-index-on-scroll:             var(--glare-ui-top-app-bar-z-index-on-scroll);
    --_access-shared-top-app-bar-transition-duration-enabled:   var(--glare-ui-top-app-bar-transition-duration-enabled);
    --_access-shared-top-app-bar-transition-duration-on-scroll: var(--glare-ui-top-app-bar-transition-duration-on-scroll);
    --_access-shared-top-app-bar-timing-function-enabled:       var(--glare-ui-top-app-bar-timing-function-enabled);
    --_access-shared-top-app-bar-timing-function-on-scroll:     var(--glare-ui-top-app-bar-timing-function-on-scroll);
    --_access-shared-top-app-bar-position-enabled:              var(--glare-ui-top-app-bar-position-enabled);
    --_access-shared-top-app-bar-position-on-scroll:            var(--glare-ui-top-app-bar-position-on-scroll);

    --_access-shared-top-app-bar-container-color-enabled:     var(--glare-ui-top-app-bar-container-color-enabled);
    --_access-shared-top-app-bar-container-color-on-scroll:   var(--glare-ui-top-app-bar-container-color-on-scroll);
    --_access-shared-top-app-bar-container-opacity-enabled:   var(--glare-ui-top-app-bar-container-opacity-enabled);
    --_access-shared-top-app-bar-container-opacity-on-scroll: var(--glare-ui-top-app-bar-container-opacity-on-scroll);

    --_access-shared-top-app-bar-headline-color:           var(--glare-ui-top-app-bar-headline-color);

    --_access-shared-top-app-bar-width:           var(--glare-ui-top-app-bar-width);
    --_access-shared-top-app-bar-shape:           var(--glare-ui-top-app-bar-shape);
    
    --_access-shared-top-app-bar-elevation-color-enabled:   var(--glare-ui-top-app-bar-elevation-color-enabled);
    --_access-shared-top-app-bar-elevation-color-on-scroll: var(--glare-ui-top-app-bar-elevation-color-on-scroll);
    --_access-shared-top-app-bar-elevation-level-disabled:   var(--glare-ui-top-app-bar-elevation-level-disabled, 0);
    --_access-shared-top-app-bar-elevation-level-on-scroll: var(--glare-ui-top-app-bar-elevation-level-on-scroll, 2);
    --_access-shared-top-app-bar-elevation-level-on-top: var(--glare-ui-top-app-bar-elevation-level-on-top, 2);
    --_access-shared-top-app-bar-elevation-level-always: var(--glare-ui-top-app-bar-elevation-level-always, 2);
}