:root,
:host {
  --va-app-bar-position: relative;
  --va-app-bar-height: auto;
  --va-app-bar-shadow: 0 0 12px 2px;
  --va-app-bar-z-index: calc(var(--va-z-index-teleport-overlay) - 100);
  --va-app-bar-transition: transform 0.5s ease;
}
.va-app-bar {
  display: flex;
  align-items: center;
  position: var(--va-app-bar-position);
  transition: all 0.5s ease;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--va-app-bar-height);
  min-height: var(--va-app-bar-height);
  min-width: 100%;
  font-family: var(--va-font-family);
  z-index: var(--va-app-bar-z-index);
}
.va-app-bar--bottom {
  top: 100%;
  transform: translateY(-100%);
}