@import '../../../styles/common.scss';

// Extend all components, except PageHeader, to the bottom
// Enable scrolling children
.children {
  overflow-y: auto;
  display: grid;
  grid-template-columns: 1fr auto;

  overflow: hidden;

  .main {
    display: grid;
    grid: 1fr / minmax(740px, 1fr) auto;

    overflow-y: auto;
    scrollbar-width: thin; //for Firefox only

    .formWrapper {
      display: grid;
      grid: 1fr / 1fr;

      &.hasMessage {
        grid: min-content 1fr / minmax(740px, 1fr);
      }
    }
  }

  //Custom scrollbar for Chrome, Safari and Edge
  ::-webkit-scrollbar {
    width: var(--scrollbar-size, $scrollbar-size);
    height: var(--scrollbar-size, $scrollbar-size);
  }
  ::-webkit-scrollbar-track {
    background: var(--scrollbar-track-color, $scrollbar-track-color);
  }

  ::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb-color, $scrollbar-thumb-color);
  }

  ::-webkit-scrollbar-thumb:hover {
    background: var(
      --scrollbar-thumb-hover-color,
      $scrollbar-thumb-hover-color
    );
  }

  ::-webkit-scrollbar-corner {
    background: var(--scrollbar-corner-color, $scrollbar-corner-color);
  }

  .formContainer {
    padding: 30px;
  }

  .loadingError {
    display: grid;
    grid: 1fr / 1fr;
  }
}

.errorMessage {
  grid-row: 2 / 3;
  grid-column: 1 / -1;
}
