//compile

.md-header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 4;
  background-color: var(--md-app-bar);
  box-shadow: var(--md-shadow-4);

  .md-app-bar {
    width: 100%;
    min-height: var(--md-app-bar-height);
    padding: 0 var(--md-side-margin);
    display: grid;
    grid-template-columns: calc(var(--md-content-margin) - 2 * var(--md-side-margin)) auto max-content;
    grid-auto-rows: minmax(var(--md-app-bar-height), max-content);
    grid-column-gap: var(--md-side-margin);
    align-items: center;

    .md-nav-icon {
      width: 48px;
      height: 48px;
      padding: 12px;
      margin-left: -12px;
      grid-row: 1 / span 1;
      grid-column: 1 / span 1;
    }

    .md-title {
      margin: 0;
      padding: 8px 0;
      grid-row: 1 / span 1;
      grid-column: 1 / span 2;
    }

    .md-nav-icon + .md-title {
      grid-column: 2 / span 1;
    }

    .md-action-icons {
      grid-row: 1 / span 1;
      grid-column: 3 / span 1;
      margin: 0 -12px;

      .material-icons {
        width: 48px;
        height: 48px;
        padding: 12px;

        &:not(:last-child) {
          margin-right: calc(var(--md-side-margin) - 24px);
        }
      }
    }

    &.md-prominent {
      .md-title {
        grid-row: 2 / span 1;
      }
    }
  }

  &.md-no-height + .md-content {
    top: 0 !important;
  }

  &:not(.active) {
    &.md-flat {
      box-shadow: none;
    }

    &.md-hidden-title {
      .md-title {
        opacity: 0;
      }
    }

    &.md-transparent {
      box-shadow: none;
      background-color: transparent;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      text-shadow: 0 0 20px rgba(0,0,0,.5);
    }
  }
}

.md-content {
  position: relative;
  opacity: 0;

  .md-empty-header-extension,
  .md-header-extension {
    background-color: var(--md-app-bar);
    width: 100%;
  }

  .md-empty-header-extension {
    height: calc(var(--md-app-bar-height) * 2);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: -1;
  }
}