@use "@material/animation/_index" as animation;
@use "@material/drawer/_index" as drawer;
@use "@material/elevation/_index" as elevation;
@use "@material/fab/_index" as fab;
@use "@material/rtl/_index" as rtl;
@use "@material/tab/_index" as tab;
@use "@material/top-app-bar/_index" as top-app-bar;

.mdc-drawer-app-content {
  max-width: 100%;
  transition: animation.standard(margin, 150ms);
  .mdc-top-app-bar {
    width: 100%;
    @include rtl.reflexive-position(right, 0);
    transition: elevation.transition-value(), animation.standard(width, 150ms);
    &.is-contextual {
      transition: elevation.transition-value(), animation.standard(width, 150ms),
        background-color 100ms linear, color 100ms linear;
      .mdc-top-app-bar__navigation-icon,
      .mdc-top-app-bar__action-item,
      .mdc-top-app-bar__title {
        transition: color 100ms linear;
      }
    }
    .mdc-top-app-bar__navigation-icon {
      transition-property: width, height, padding;
      transition-duration: 120ms;
      transition-timing-function: animation.$standard-curve-timing-function;
      overflow: hidden;
    }
  }
}

.rail.mdc-drawer + .mdc-drawer-app-content {
  @include rtl.reflexive-box(margin, left, 56px);
  .mdc-top-app-bar {
    width: calc(100% - 56px);
  }
}

.nav.mdc-drawer.mdc-drawer--open:not(.mdc-drawer--closing)
  + .mdc-drawer-app-content
  .mdc-top-app-bar {
  width: calc(100% - 256px);
  .mdc-top-app-bar__navigation-icon {
    width: 0;
    padding: 12px 0;
  }
}

.rail.mdc-drawer.mdc-drawer--open.mdc-drawer--closing
  + .mdc-drawer-app-content
  .mdc-top-app-bar {
  width: calc(100% - 56px);
}

.content-container {
  display: flex;
  max-width: 100%;
  .mdc-drawer--animate:not(.mdc-drawer--closing) ~ & .mdc-drawer-app-content {
    transition-duration: drawer.$animation-enter;
  }
  .mdc-drawer--closing ~ & .mdc-drawer-app-content {
    transition-duration: drawer.$animation-exit;
  }
}

.main {
  flex: auto 1;
  flex-shrink: 1;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  min-height: calc(100vh - #{top-app-bar.$row-height});
  max-width: 100%;
  overflow: hidden;
  .content-grid {
    flex-grow: 1;
    flex-shrink: 0;
  }
  &::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 0;
    transition: animation.standard(height, 250ms);
    z-index: -1;
  }
  &.extended-app-bar::before {
    height: 256px - top-app-bar.$row-height;
    .mdc-top-app-bar.search-open ~ .content-container & {
      height: 0;
    }
  }
  .statistics &.extended-app-bar::before,
  .history &.extended-app-bar::before {
    height: 256px - (top-app-bar.$row-height + 48px);
  }

  @media (max-width: top-app-bar.$mobile-breakpoint) {
    &.extended-app-bar::before {
      height: 256px - top-app-bar.$mobile-row-height;
    }
    .statistics &.extended-app-bar::before,
    .history &.extended-app-bar::before {
      height: 256px - (top-app-bar.$mobile-row-height + 48px);
    }
  }
}

.bottom-nav .main::before {
  content: none;
}

.drawer-open .main.extended-app-bar::before,
.drawer-open.main.extended-app-bar::before {
  height: 0;
}

.create-fab.mdc-fab {
  position: fixed;
  bottom: 24px;
  @include rtl.reflexive-position(right, 24px);
  z-index: 4;
  animation: fab-enter-opacity 15ms linear 30ms,
    fab-enter-transform 270ms 0ms cubic-bezier(0, 0, 0.2, 1);
  &.mdc-fab--extended {
    transition-property: box-shadow, right;
    @include rtl.rtl {
      transition-property: box-shadow, left;
    }
    transition-timing-function: linear,
      animation.$standard-curve-timing-function;
    transition-duration: 280ms, drawer.$animation-enter;
    .mdc-drawer--dismissible.mdc-drawer--animate:not(.mdc-drawer--closing)
      ~ .editor-elements
      & {
      transition-duration: 280ms, drawer.$animation-enter;
    }
    .mdc-drawer--dismissible.mdc-drawer--closing ~ .editor-elements & {
      transition-duration: 280ms, drawer.$animation-exit;
    }
    .mdc-drawer--dismissible.mdc-drawer--open ~ .editor-elements &,
    .mdc-drawer--dismissible.mdc-drawer--opening ~ .editor-elements & {
      @include rtl.reflexive-position(right, 24px + 320px);
    }
    .mdc-drawer--dismissible.mdc-drawer--open.mdc-drawer--closing
      ~ .editor-elements
      & {
      @include rtl.reflexive-position(right, 24px);
    }
  }

  @media (max-width: 1239px) {
    bottom: 16px;
    @include rtl.reflexive-position(right, 16px);
    &.middle {
      bottom: 28px;
      @include rtl.reflexive-position(right, 36px);
      margin: 0 auto;
    }
  }

  @media (min-width: 600px) {
    &.middle {
      bottom: 20px;
    }
  }
}

@keyframes fab-enter-opacity {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fab-enter-transform {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

.app-container {
  display: flex;
  flex-direction: column;
  max-width: 100%;
}

.view-transition .content-grid {
  animation: animation.exit-permanent(fade-out, 90ms),
    animation.enter(fade-in-scale, 210ms, 90ms);
  will-change: transform, opacity;
}

.bottom-nav {
  & ~ .mdc-snackbar,
  .mdc-snackbar {
    bottom: top-app-bar.$mobile-row-height;
  }
  &.statistics,
  &.history {
    & ~ .mdc-snackbar,
    .mdc-snackbar {
      bottom: top-app-bar.$mobile-row-height + tab.$height;
    }
  }
}

.has-fab {
  & ~ .mdc-snackbar,
  .mdc-snackbar {
    bottom: fab.$height + 16px;
  }
  &.bottom-nav ~ .mdc-snackbar,
  &.bottom-nav .mdc-snackbar {
    bottom: top-app-bar.$mobile-row-height + (fab.$height / 2);
  }
}
