.fleetchart-app {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2000;
  height: 100vh;
  overflow: hidden;
  background-color: #111;
  outline: 0;
  transition:
    opacity $transition-base-speed ease-in-out,
    transform $transition-base-speed ease-in-out;

  &.fade {
    transform: scale(0);
    opacity: 0;

    &.in {
      transform: scale(1);
      opacity: 1;
    }
  }

  .fleetchart-app-mode {
    position: fixed;
    left: 20px;
    top: 20px;
    z-index: 1000;
  }

  &__filter {
    display: flex;
    position: fixed;
    left: 20px;
    bottom: 0;
    z-index: 1000;
  }

  &__offcanvas-filter {
    position: fixed;
    max-width: 300px;
    overflow-y: auto;
    top: 0;
    left: 0;
    bottom: 0;
    transform: translateX(-100%);
    transition: transform $transition-base-speed ease-in-out;
    background-color: rgba(black, 0.8);
    padding: 20px;
    z-index: 2000;

    &__backdrop {
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      z-index: 2000;
      background-color: rgba(black, 0.5);
    }

    &--visible {
      transform: translateX(0);
    }
  }

  .fleetchart-app-close {
    position: absolute;
    top: 15px;
    right: 5px;
    z-index: 2001;
    margin-top: env(safe-area-inset-top);
    margin-right: env(safe-area-inset-right);
    margin-left: env(safe-area-inset-left);
  }
}

@media (max-width: $desktop-breakpoint) {
  .fleetchart-app {
    .fleetchart-app-mode {
      top: auto;
      bottom: 0;
    }
  }
}
