/* ==========================================================================
 * View
 * ========================================================================== */

.mds-c-view {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  height: 100%;
  justify-items: stretch;
  overflow: hidden;
  width: 100%;

  /* Overlay for Expanded Navigation */
  &::after {
    background-color: var(--mds-t-background-color--overlay);
    bottom: 0;
    content: '';
    display: block;
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    right: 0;
    top: 0;

    /* transition-duration: 0.3s; */

    /* transition-property: opacity; */

    /* transition-timing-function: ease-out; */
    z-index: -1;
  }

  &__header,
  &__footer {
    --mds-t-background-color: var(--mds-t-background-color--primary);

    background-color: var(--mds-t-background-color);
    flex-shrink: 0;
    position: relative;
    z-index: 2;
  }

  &__header {
    box-shadow: var(--mds-d-elevation--3);
    position: relative;

    &:empty {
      display: none;
    }
  }

  &__footer {
    border-top: 1px solid var(--mds-t-border-color--secondary);

    &:empty {
      display: none;
    }
  }
}