@use 'apps/dashboard/src/variables' as *;
@use '../../edit-resource.tokens' as tokens;

pa-tabs {
  display: block;
  margin-bottom: rhythm(2);
}

.paragraph-container {
  p {
    margin-bottom: 0;

    ::ng-deep mark {
      background: $color-neutral-lighter;
      cursor: default;
      padding: 0 rhythm(0.25);
    }
  }
}

.right-panel-container {
  .help {
    display: flex;
    gap: rhythm(0.5);
  }

  .ner-families-container {
    max-height: calc(
      100vh - var(--app-topbar-height) - #{tokens.$height-header} - var(--app-layout-padding-top) - #{tokens.$height-help-container}
    );
    position: sticky;
    overflow: auto;
    top: calc(#{tokens.$sticky-top} + #{tokens.$height-help-container});
  }

  pa-expander ::ng-deep .pa-expander-header {
    padding-left: rhythm(1);
  }

  .family-title {
    font-weight: $font-weight-semi-bold;
  }

  .family-color {
    height: rhythm(5);
    left: 0;
    position: absolute;
    top: 0;
    width: rhythm(1);
  }

  .entity-list {
    border-left: 1px solid;
    padding: rhythm(0.5) rhythm(1);
    list-style: none;

    li {
      line-height: rhythm(4);

      &:not(:last-of-type) {
        box-shadow: $box-shadow-collapsed-expander-header;
      }
    }
  }
}
