.view-mode--inactive {
  .react-resizable-handle,
  .add-row-panel-hint,
  .dash-row-menu-container,
  .navbar-buttons--actions,
  .panel-info-corner--info,
  .panel-info-corner--links {
    display: none;
  }

  .navbar-page-btn {
    i {
      display: none;
    }

    i.navbar-page-btn__folder-icon {
      opacity: inherit;
    }
  }

  .navbar-button--zoom {
    display: none;
  }
}

.view-mode--playlist {
  @extend .view-mode--inactive;
}

// https://github.com/grafana/grafana/issues/18114
.view-mode--tv.panel-in-fullscreen {
  .navbar {
    padding-left: $navbar-padding;
  }

  .navbar-page-btn {
    transform: none;
  }
}

.view-mode--tv {
  @extend .view-mode--inactive;

  .sidemenu {
    position: fixed;
    background-color: transparent;
    box-shadow: none;

    .sidemenu__top,
    .sidemenu__bottom,
    .sidemenu__logo_small_breakpoint {
      display: none;
    }

    .sidemenu__logo {
      @include media-breakpoint-down(sm) {
        display: block;
      }
    }
  }

  .navbar {
    padding-left: $side-menu-width;
  }

  .submenu-controls {
    display: none;
  }
}

.view-mode--kiosk {
  @extend .view-mode--tv;

  .sidemenu,
  .navbar {
    display: none;
  }

  .scroll-canvas--dashboard {
    height: 100%;
  }

  .submenu-controls {
    display: none;
  }
}