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

.mdc-top-app-bar {
  &--fixed {
    top: 0;
  }
  &__row.tab-row {
    height: 48px;
    .mdc-top-app-bar__section {
      padding: 0;
      .mdc-tab-bar {
        width: auto;
        @media (max-width: 1239px) {
          width: 100%;
        }
      }
    }
  }
  .mdc-linear-progress {
    position: absolute;
    top: top-app-bar.$row-height - 4px;
    .mdc-linear-progress__buffering-dots {
      display: none;
    }
  }
  .search-bar--persistent {
    @include rtl.reflexive-box(margin, right, 8px);
  }
  .mdc-icon-button {
    opacity: 0;
    animation: animation.standard(fade-in-scale, 150ms) forwards;
    animation-delay: calc(var(--animation-delay) * 75ms);
  }
  .hidden {
    .mdc-menu {
      display: none;
    }
    &.mdc-menu-surface--anchor {
      pointer-events: none;
      width: 0;
      transition-delay: 0;
    }
    .mdc-icon-button {
      opacity: 1;
      animation: animation.standard(fade-out, 150ms) forwards;
      animation-delay: 0;
    }
  }
  .segmented-button {
    margin: 0 4px;
    &:first-child {
      @include rtl.reflexive-box(margin, right, 4px);
    }
    &:last-child {
      @include rtl.reflexive-box(margin, left, 4px);
    }
    & + .category-button {
      @include rtl.reflexive-box(margin, left, 4px);
    }
  }

  @media (max-width: 599px) {
    .segmented-button {
      @include rtl.reflexive-box(margin, right, 12px);
    }
    .mdc-linear-progress {
      top: top-app-bar.$mobile-row-height - 4px;
    }
  }

  &.bottom-app-bar {
    position: fixed;
    bottom: 0;
    top: auto !important;
    &:not(.bottom-app-bar--indent) {
      @include elevation.elevation(4);
    }
    &.bottom-app-bar--indent {
      @include elevation.elevation(0);
      background-color: transparent;
      filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.2))
        drop-shadow(0px 4px 2.5px rgba(0, 0, 0, 0.14))
        drop-shadow(0px 1px 5px rgba(0, 0, 0, 0.12));
      .indent {
        padding: 0;
        flex-grow: 0;
        flex-shrink: 0;
        align-items: flex-start;
      }
      .actions {
        display: flex;
      }
    }
    .mdc-linear-progress {
      top: auto;
      bottom: 0;
    }

    @media (min-width: 600px) {
      .mdc-top-app-bar__row {
        height: 48px;
      }
      & + .mdc-top-app-bar--fixed-adjust {
        padding-top: 48px;
      }
    }
  }
}

.statistics,
.history {
  .mdc-top-app-bar--fixed-adjust {
    padding-top: top-app-bar.$row-height + 48px;
    @media (max-width: 599px) {
      padding-top: top-app-bar.$mobile-row-height + 48px;
    }
  }
}

.rmwc-tooltip.hidden {
  display: none;
}

@keyframes appear {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
