@use '@carbon/layout';
@use '../vars' as *;

html {
  scroll-behavior: smooth;
}

.omrs-app-error {
  padding: layout.$spacing-11;
  width: 100%;
  height: 100%;
  background: white;
  border-top: 5px solid $danger;

  p {
    margin: layout.$spacing-06 0;
  }

  .cds--snippet {
    margin-top: layout.$spacing-06;
  }
}

#omrs-apps-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: calc(100vh - var(--omrs-navbar-height));
  height: fit-content;
  grid-area: appRoots;
  overflow-x: auto;
  min-width: 0;
}

#omrs-left-nav-container {
  grid-area: leftNav;
}

#omrs-workspaces-container {
  grid-area: workspace;
  position: sticky;
  height: calc(100vh - var(--omrs-navbar-height));
  top: var(--omrs-navbar-height);
  z-index: 1000;
  will-change: contents;
}

#omrs-top-nav-app-container {
  grid-area: topNav;
  height: var(--omrs-navbar-height);
}

body {
  display: grid;
  grid-template-areas:
    'topNav topNav topNav'
    'leftNav appRoots workspace';
  grid-template-columns: min-content 1fr min-content;
  container-type: inline-size;
}

@media print {
  body {
    display: block;
    container-type: normal;
  }

  #omrs-left-nav-container,
  #omrs-workspaces-container,
  #omrs-top-nav-app-container {
    display: none;
  }

  #omrs-apps-container {
    height: auto;
    min-height: auto;
    overflow: visible;
  }
}