@use 'apps/dashboard/src/variables' as *;

$header-height: rhythm(16);
$header-margin-bottom: rhythm(3);

$family-list-width: rhythm(48);
$gap-family-selection: rhythm(7);

.ner-management {
  position: relative;

  header {
    margin-bottom: $header-margin-bottom;
    max-width: rhythm(80);
  }

  .ner-container {
    display: flex;
    gap: calc(#{$gap-family-selection} - #{$scrollbar-width});
    max-height: calc(
      100vh - var(--app-topbar-height) - var(--app-layout-padding-top) - var(--app-layout-padding-bottom) - #{$header-height}
    );
    overflow: hidden;
  }

  .ner-family-list-container {
    flex: 0 0 auto;
    overflow: auto;
    width: calc(#{$family-list-width} + #{$scrollbar-width});

    .ner-family-list {
      width: $family-list-width;

      .ner-family {
        .family-color {
          width: rhythm(1);
        }
        .family-name {
          flex: 1 0 auto;
        }
      }
    }
  }

  .selected-family-container {
    overflow: hidden;
    padding-top: rhythm(1);
    width: 100%;

    .family-toolbar {
      align-items: center;
      background: $color-light-stronger;
      display: flex;
      gap: rhythm(2);
      justify-content: space-between;
      padding-right: $scrollbar-width;
      position: sticky;
      top: 0;
      width: 100%;
      z-index: 1;
    }
  }
}
