@use '@material/top-app-bar';
@use '@material/elevation';
@use '@material/top-app-bar/mdc-top-app-bar';

.mdc-top-app-bar {
    @include top-app-bar.fill-color(primary);
    @include top-app-bar.ink-color(on-primary);
    @include top-app-bar.icon-ink-color(on-primary);

    //transition: transform .15s;
    position: relative;

    &__section--align-center {
        justify-content: center;
    }

    &--fixed {
        position: fixed;
    }

    &--sticky {
        position: sticky;
        top: 0;
        z-index: 7;
    }

    &--sticky-hidden {
        transform: translateY(-100%);
        transition: transform .2s;
    }
    
    &--sticky-shown {
        transform: translateY(0);
        transition: transform .2s;
    }

    &--dense {
        transition: transform .1s;
    }
    
    &--prominent {
        transition: transform .2s;
    }

    &--raised {
        @include elevation.elevation(4);
        transition: box-shadow 200ms linear;
        z-index: 8;
    }
}