@truedat/dd 8.11.6 → 8.11.9

package/src/styles/lineageGraph.less

@@ -1,1236 +0,0 @@
-.graph-hash {
-  font-family: monospace;
-}
-
-.dl svg {
-  border-radius: 5px;
-}
-
-.lineage-view {
-  --td-graph-container-height: clamp(620px, calc(100vh - 170px), 88vh);
-  --td-graph-border-radius: 8px;
-  --td-lineage-sidebar-width: 450px;
-  --td-lineage-sidebar-collapsed-width: 56px;
-  --td-lineage-menu-transition-duration: 180ms;
-  --td-lineage-menu-transition-easing: ease;
-  border-radius: 8px;
-
-  &.ui.segment {
-    padding: 0;
-    border: 0;
-    background: transparent;
-    box-shadow: none;
-  }
-
-  &__header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 16px;
-    margin-bottom: 16px;
-    padding: 10px 12px;
-    border: 1px solid #dfe6ef;
-    border-radius: 8px;
-    background: #ffffff;
-    box-shadow: 0 1px 3px rgba(21, 26, 36, 0.06);
-  }
-
-  &__header-main {
-    display: flex;
-    min-width: 0;
-    align-items: center;
-    gap: 12px;
-  }
-
-  &__header-icon {
-    display: flex;
-    width: 36px;
-    height: 36px;
-    flex: 0 0 auto;
-    align-items: center;
-    justify-content: center;
-    border: 1px solid #d7dde6;
-    border-radius: 8px;
-    background: #f8fafc;
-    color: #002057;
-  }
-
-  &__header-copy {
-    min-width: 0;
-  }
-
-  &__header-title-row {
-    display: flex;
-    min-width: 0;
-    align-items: center;
-    gap: 8px;
-    line-height: 1.2;
-
-    h2 {
-      margin: 0;
-      color: #002057;
-      font-size: 18px;
-      font-weight: 700;
-      line-height: 1.2;
-      white-space: nowrap;
-    }
-  }
-
-  &__header-copy p {
-    margin: 4px 0 0;
-    color: #697386;
-    font-size: 12px;
-    line-height: 1.3;
-  }
-
-  &__export-button.ui.button {
-    flex: 0 0 auto;
-    margin: 0;
-    border-radius: 6px;
-    color: #435064 !important;
-    font-size: 10px;
-    font-weight: 700;
-    text-transform: uppercase;
-  }
-
-  &__workspace {
-    position: relative;
-    display: block;
-    min-width: 0;
-    overflow: visible;
-  }
-
-  &__sidebar {
-    position: absolute;
-    top: 30px;
-    left: 15px;
-    width: var(--td-lineage-sidebar-width);
-    min-width: 0;
-    max-height: calc(100vh - 80px);
-    overflow: visible;
-    border-radius: 8px;
-    background: transparent;
-    box-shadow: none;
-    transition:
-      width var(--td-lineage-menu-transition-duration)
-        var(--td-lineage-menu-transition-easing),
-      min-height var(--td-lineage-menu-transition-duration)
-        var(--td-lineage-menu-transition-easing),
-      box-shadow var(--td-lineage-menu-transition-duration)
-        var(--td-lineage-menu-transition-easing);
-    z-index: 5000;
-
-    .lineage-toolbar {
-      margin-bottom: 0;
-    }
-
-    .lineage-toolbar__form {
-      gap: 14px;
-    }
-
-    .lineage-toolbar__fields {
-      grid-template-columns: 1fr;
-    }
-
-    .lineage-selection-column--resource {
-      grid-column: 1 / -1;
-    }
-
-    .lineage-toolbar__controls {
-      grid-template-columns: 1fr;
-    }
-
-    .lineage-resource-field {
-      grid-template-columns: minmax(0, 1fr) auto;
-    }
-
-    .lineage-column-dropdown.ui.dropdown .menu.visible {
-      width: min(430px, calc(100vw - 88px));
-      column-width: 220px;
-      z-index: 4000;
-    }
-
-    .lineage-toolbar__actions {
-      grid-column: 1 / -1;
-
-      .ui.button:first-child {
-        order: 3;
-        grid-column: 1 / -1;
-      }
-
-      .ui.button:nth-child(2) {
-        order: 1;
-      }
-
-      .ui.button:nth-child(3) {
-        order: 2;
-      }
-    }
-
-    .lineage-resource-selector.ui.multiple.dropdown > .label {
-      max-width: calc(100% - 12px);
-    }
-
-    .lineage-resource-selector.ui.multiple.dropdown:not(.active):not(.visible) {
-      max-height: min(292px, calc(100vh - 360px));
-      overflow-x: hidden;
-      overflow-y: auto;
-      overscroll-behavior: contain;
-
-      > .label {
-        display: flex;
-        width: calc(100% - 12px);
-        max-width: none;
-        align-items: center;
-      }
-    }
-  }
-
-  &__sidebar-panel {
-    box-sizing: border-box;
-    display: flex;
-    width: var(--td-lineage-sidebar-width);
-    max-height: inherit;
-    flex-direction: column;
-    gap: 0;
-    opacity: 1;
-    overflow: visible;
-    transform: translateX(0);
-    transition:
-      opacity var(--td-lineage-menu-transition-duration)
-        var(--td-lineage-menu-transition-easing),
-      transform var(--td-lineage-menu-transition-duration)
-        var(--td-lineage-menu-transition-easing),
-      visibility 0ms linear 0ms;
-    visibility: visible;
-  }
-
-  &__sidebar-header {
-    position: relative;
-    display: block;
-    padding: 0 10px;
-  }
-
-  &__sidebar-toggle.ui.button {
-    position: absolute;
-    top: 0;
-    right: -48px;
-    width: 40px;
-    height: 40px;
-    min-height: 40px;
-    margin: 0;
-    padding: 0;
-    border: 1px solid #d7dde6;
-    border-radius: 8px;
-    background: #ffffff !important;
-    box-shadow: 0 6px 16px rgba(21, 26, 36, 0.08);
-    transition:
-      background-color var(--td-lineage-menu-transition-duration)
-        var(--td-lineage-menu-transition-easing),
-      border-color var(--td-lineage-menu-transition-duration)
-        var(--td-lineage-menu-transition-easing),
-      box-shadow var(--td-lineage-menu-transition-duration)
-        var(--td-lineage-menu-transition-easing),
-      color var(--td-lineage-menu-transition-duration)
-        var(--td-lineage-menu-transition-easing);
-    z-index: 2;
-  }
-
-  &__sidebar-tabs {
-    display: flex;
-    min-width: 0;
-    width: 100%;
-    max-width: 100%;
-    align-items: flex-end;
-    gap: 4px;
-    overflow: visible;
-    border: 0;
-    background: transparent;
-  }
-
-  &__sidebar-tab {
-    position: relative;
-    display: inline-flex;
-    flex: 1 1 0;
-    width: auto;
-    min-width: 0;
-    min-height: 40px;
-    align-items: center;
-    justify-content: center;
-    gap: 7px;
-    padding: 6px 12px 7px;
-    border: 1px solid #d7dde6;
-    border-bottom-color: #d7dde6;
-    border-radius: 8px 8px 0 0;
-    background: #f8fafc;
-    color: #697386;
-    cursor: pointer;
-    font-size: 10px;
-    font-weight: 800;
-    letter-spacing: 0;
-    line-height: 1.2;
-    text-transform: uppercase;
-    transition:
-      background-color var(--td-lineage-menu-transition-duration)
-        var(--td-lineage-menu-transition-easing),
-      border-color var(--td-lineage-menu-transition-duration)
-        var(--td-lineage-menu-transition-easing),
-      color var(--td-lineage-menu-transition-duration)
-        var(--td-lineage-menu-transition-easing);
-
-    &:not([aria-selected="true"]):hover {
-      border-color: #002057;
-      background: #002057;
-      color: #ffffff;
-    }
-
-    &[aria-selected="true"] {
-      z-index: 2;
-      margin-bottom: -1px;
-      border-bottom-color: #ffffff;
-      background: #ffffff;
-      color: #002057;
-      box-shadow: 0 -4px 12px rgba(21, 26, 36, 0.05);
-    }
-
-    &-icon {
-      display: inline-flex;
-      width: 28px;
-      height: 28px;
-      flex: 0 0 auto;
-      align-items: center;
-      justify-content: center;
-      border: 1px solid #d7dde6;
-      border-radius: 8px;
-      background: #ffffff;
-      color: #697386;
-      transition:
-        background-color var(--td-lineage-menu-transition-duration)
-          var(--td-lineage-menu-transition-easing),
-        border-color var(--td-lineage-menu-transition-duration)
-          var(--td-lineage-menu-transition-easing),
-        box-shadow var(--td-lineage-menu-transition-duration)
-          var(--td-lineage-menu-transition-easing),
-        color var(--td-lineage-menu-transition-duration)
-          var(--td-lineage-menu-transition-easing);
-
-      .icon {
-        margin: 0;
-        font-size: 15px;
-        line-height: 1;
-      }
-    }
-
-    &[aria-selected="true"] &-icon {
-      border-color: #002057;
-      background: #002057;
-      color: #ffffff;
-      box-shadow: 0 8px 18px rgba(0, 32, 87, 0.2);
-    }
-
-    &:not([aria-selected="true"]):hover &-icon {
-      border-color: rgba(255, 255, 255, 0.36);
-      background: rgba(255, 255, 255, 0.12);
-      box-shadow: none;
-      color: #ffffff;
-    }
-
-    &-label {
-      min-width: 0;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-
-    &-count {
-      display: inline-flex;
-      flex: 0 0 auto;
-      min-width: 16px;
-      align-items: center;
-      justify-content: center;
-      margin-left: 5px;
-      padding: 1px 4px;
-      border-radius: 6px;
-      background: #edf0f4;
-      color: #697386;
-      font-size: 9px;
-      line-height: 1.2;
-      transition:
-        background-color var(--td-lineage-menu-transition-duration)
-          var(--td-lineage-menu-transition-easing),
-        color var(--td-lineage-menu-transition-duration)
-          var(--td-lineage-menu-transition-easing);
-    }
-
-    &[aria-selected="true"] &-count {
-      background: #edf4ff;
-      color: #002057;
-    }
-
-    &:not([aria-selected="true"]):hover &-count {
-      background: rgba(255, 255, 255, 0.16);
-      color: #ffffff !important;
-    }
-  }
-
-  &__sidebar-content {
-    min-width: 0;
-    padding: 20px;
-    border: 1px solid #d7dde6;
-    border-radius: 8px;
-    background: #ffffff;
-    box-shadow: 0 12px 36px rgba(21, 26, 36, 0.14);
-    overflow: visible;
-
-    &--events {
-      overflow: visible;
-    }
-  }
-
-  &__workspace--sidebar-collapsed {
-    .lineage-view__sidebar {
-      width: var(--td-lineage-sidebar-collapsed-width);
-      min-height: 0;
-      overflow: visible;
-    }
-
-    .lineage-view__sidebar-panel {
-      position: absolute;
-      top: 0;
-      left: 0;
-      opacity: 0;
-      pointer-events: none;
-      transform: translateX(-16px);
-      transition:
-        opacity var(--td-lineage-menu-transition-duration)
-          var(--td-lineage-menu-transition-easing),
-        transform var(--td-lineage-menu-transition-duration)
-          var(--td-lineage-menu-transition-easing),
-        visibility 0ms linear var(--td-lineage-menu-transition-duration);
-      visibility: hidden;
-    }
-
-    .lineage-view__sidebar-rail.ui.button {
-      display: flex;
-    }
-  }
-
-  &__sidebar-rail.ui.button {
-    position: relative;
-    display: none;
-    width: 40px;
-    height: 40px;
-    min-width: 40px;
-    min-height: 40px;
-    margin: 1px 0;
-    padding: 0;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    gap: 0;
-    border: 1px solid #d7dde6;
-    border-radius: var(--td-graph-border-radius, 8px);
-    background: #ffffff !important;
-    box-shadow: 0 12px 36px rgba(21, 26, 36, 0.14);
-    color: #697386;
-    overflow: hidden;
-    transition:
-      background-color var(--td-lineage-menu-transition-duration)
-        var(--td-lineage-menu-transition-easing),
-      border-color var(--td-lineage-menu-transition-duration)
-        var(--td-lineage-menu-transition-easing),
-      box-shadow var(--td-lineage-menu-transition-duration)
-        var(--td-lineage-menu-transition-easing),
-      color var(--td-lineage-menu-transition-duration)
-        var(--td-lineage-menu-transition-easing);
-
-    > .icon {
-      flex: 0 0 auto;
-      order: 1;
-      margin: 0;
-      position: relative;
-      z-index: 1;
-    }
-
-    &:hover,
-    &:focus {
-      border-color: #002057;
-      background: #002057 !important;
-      color: #ffffff !important;
-    }
-
-    &:hover > .icon,
-    &:focus > .icon,
-    &:hover span,
-    &:focus span {
-      color: #ffffff !important;
-    }
-
-    span {
-      display: none;
-      position: relative;
-      z-index: 1;
-    }
-  }
-
-  &__sidebar-rail--hint.ui.button {
-    border-color: #d7dde6;
-    background: #ffffff !important;
-  }
-
-  &__sidebar-rail--hint-on.ui.button {
-    border-color: #ed5c17;
-    background: #fff1eb !important;
-    box-shadow: 0 12px 36px rgba(237, 92, 23, 0.24);
-    color: #ed5c17;
-  }
-
-  &__main {
-    width: 100%;
-    min-width: 0;
-  }
-
-  .ui.dropdown .menu,
-  .ui.dropdown .menu.visible,
-  .fix-dropdown-selector.ui.dropdown .menu,
-  .fix-dropdown-selector.ui.dropdown .menu.visible {
-    z-index: 4000 !important;
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    &__sidebar,
-    &__sidebar-panel,
-    &__sidebar-toggle.ui.button,
-    &__sidebar-tab,
-    &__sidebar-tab-icon,
-    &__sidebar-tab-count,
-    &__sidebar-rail.ui.button {
-      transition: none;
-    }
-  }
-
-  @media (max-width: 767px) {
-    &__header {
-      align-items: flex-start;
-    }
-
-    &__workspace {
-      display: grid;
-      grid-template-columns: 1fr;
-    }
-
-    &__sidebar {
-      position: static;
-      width: 100%;
-      max-height: none;
-      min-height: 0;
-    }
-
-    &__workspace--sidebar-collapsed &__sidebar {
-      min-height: 48px;
-    }
-
-    &__sidebar-rail.ui.button {
-      width: 40px;
-      height: 40px;
-      min-height: 40px;
-      flex-direction: row;
-      justify-content: center;
-      padding: 0;
-    }
-  }
-}
-
-.lineage-toolbar {
-  margin-bottom: 16px;
-  overflow: visible;
-
-  &--panel {
-    margin-bottom: 0;
-  }
-
-  &__title {
-    padding-bottom: 8px !important;
-  }
-
-  &__form {
-    display: grid;
-    gap: 12px;
-    overflow: visible;
-  }
-
-  &__fields {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
-    gap: 8px;
-    align-items: start;
-    overflow: visible;
-  }
-
-  &__controls {
-    display: grid;
-    grid-template-columns: minmax(0, 1fr);
-    gap: 8px;
-    align-items: end;
-  }
-
-  &__levels {
-    display: flex;
-    min-width: 0;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 6px;
-
-    .ui.header {
-      margin: 0;
-      color: #435064;
-      font-size: 12px;
-      font-weight: 700;
-      line-height: 1.2;
-    }
-  }
-
-  &__level-options.inline.fields {
-    display: flex;
-    width: 100%;
-    min-width: 0;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: 4px 10px;
-    margin: 0;
-
-    .field {
-      margin: 0;
-    }
-
-    label {
-      font-size: 11px;
-    }
-  }
-
-  &__level-option {
-    padding-right: 8px;
-  }
-
-  &__level-depth.field {
-    display: inline-flex;
-    min-width: 0;
-    align-items: center;
-    gap: 3px;
-
-    .ui.radio.checkbox {
-      margin: 0;
-    }
-  }
-
-  &__level-input.field {
-    width: 46px;
-    min-width: 46px;
-    margin: 0 !important;
-
-    > .field {
-      width: 46px;
-      margin: 0;
-    }
-
-    .ui.input,
-    .ui.input > input,
-    input {
-      width: 46px;
-      min-width: 46px;
-      max-width: 46px;
-    }
-
-    .ui.input > input,
-    input {
-      height: 30px;
-      padding: 5px 6px;
-      text-align: center;
-    }
-
-    input[type="number"]::-webkit-inner-spin-button,
-    input[type="number"]::-webkit-outer-spin-button {
-      -webkit-appearance: none;
-      margin: 0;
-    }
-
-    input[type="number"] {
-      -moz-appearance: textfield;
-    }
-  }
-
-  &__actions {
-    display: grid;
-    grid-column: 1 / -1;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    gap: 8px;
-
-    .ui.button {
-      margin: 0;
-      transition:
-        background-color var(--td-lineage-menu-transition-duration)
-          var(--td-lineage-menu-transition-easing),
-        border-color var(--td-lineage-menu-transition-duration)
-          var(--td-lineage-menu-transition-easing),
-        box-shadow var(--td-lineage-menu-transition-duration)
-          var(--td-lineage-menu-transition-easing),
-        color var(--td-lineage-menu-transition-duration)
-          var(--td-lineage-menu-transition-easing);
-    }
-
-    > span,
-    > span > .ui.button {
-      display: block;
-      width: 100%;
-    }
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    &__actions .ui.button {
-      transition: none;
-    }
-  }
-
-  @media (max-width: 767px) {
-    &__fields {
-      grid-template-columns: 1fr;
-    }
-
-    &__controls {
-      grid-template-columns: 1fr;
-    }
-
-    &__actions {
-      justify-content: stretch;
-
-      .ui.button {
-        flex: 1 1 auto;
-      }
-    }
-  }
-}
-
-.lineage-selection-column {
-  min-width: 0;
-  overflow: visible;
-
-  &--resource {
-    grid-column: 1 / -1;
-  }
-
-  @media (max-width: 767px) {
-    &--resource {
-      grid-column: span 1;
-    }
-  }
-}
-
-.lineage-resource-field {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  gap: 6px;
-  align-items: start;
-
-  @media (max-width: 767px) {
-    grid-template-columns: minmax(0, 1fr) auto;
-  }
-}
-
-.lineage-resource-toggle {
-  display: inline-flex;
-  width: auto;
-  min-width: 34px;
-  height: 34px;
-  align-items: center;
-  justify-content: center;
-  margin: 0;
-  padding: 0 6px;
-  border-radius: 6px;
-  border: 1px solid rgba(34, 36, 38, 0.15);
-  background: #e0e1e2;
-  color: rgba(0, 0, 0, 0.6);
-  cursor: pointer;
-  font-size: 13px;
-  transition:
-    background-color var(--td-lineage-menu-transition-duration)
-      var(--td-lineage-menu-transition-easing),
-    border-color var(--td-lineage-menu-transition-duration)
-      var(--td-lineage-menu-transition-easing),
-    box-shadow var(--td-lineage-menu-transition-duration)
-      var(--td-lineage-menu-transition-easing),
-    color var(--td-lineage-menu-transition-duration)
-      var(--td-lineage-menu-transition-easing);
-  white-space: nowrap;
-
-  &:disabled {
-    opacity: 0.45;
-    cursor: not-allowed;
-  }
-
-  &-content {
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
-  }
-
-  .icon {
-    width: 1em;
-    height: 1em;
-    margin: 0;
-    font-size: 14px;
-    line-height: 1;
-  }
-
-  &--add {
-    border-color: #ed5c17;
-    background: #ed5c17;
-    box-shadow: 0 0 0 1px #ed5c17 inset;
-    color: #ffffff;
-
-    &:hover,
-    &:focus {
-      border-color: #ed5c17;
-      background: #ed5c17;
-      box-shadow: 0 0 0 1px #ed5c17 inset;
-      color: #ffffff;
-    }
-
-    .icon {
-      color: #ffffff;
-    }
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    transition: none;
-  }
-}
-
-.lineage-domain-selector.ui.dropdown .menu > .item.disabled {
-  background-color: #f6f8fb;
-  color: #a2a9b8;
-  cursor: not-allowed;
-}
-
-.lineage-domain-selector-skeleton {
-  position: relative;
-  display: flex;
-  min-height: 34px;
-  align-items: center;
-  justify-content: space-between;
-  padding: 8px 10px;
-  border: 1px solid #d7dde6;
-  border-radius: 6px;
-  background: #ffffff;
-  overflow: hidden;
-
-  &::before {
-    position: absolute;
-    inset: 0;
-    background: linear-gradient(
-      90deg,
-      rgba(246, 248, 251, 0) 0%,
-      rgba(246, 248, 251, 0.88) 50%,
-      rgba(246, 248, 251, 0) 100%
-    );
-    content: "";
-    transform: translateX(-100%);
-    animation: lineage-domain-skeleton 1100ms ease-in-out infinite;
-  }
-
-  &__label {
-    width: min(150px, 62%);
-    height: 10px;
-    border-radius: 999px;
-    background: #dfe5ee;
-  }
-
-  &__icon {
-    width: 10px;
-    height: 10px;
-    border-right: 2px solid #b8c1cf;
-    border-bottom: 2px solid #b8c1cf;
-    transform: rotate(45deg);
-  }
-}
-
-@keyframes lineage-domain-skeleton {
-  to {
-    transform: translateX(100%);
-  }
-}
-
-.lineage-column-dropdown.ui.dropdown .menu.visible {
-  width: min(480px, calc(100vw - 80px));
-  column-gap: 0;
-  column-width: 220px;
-  z-index: 4000;
-
-  > .item {
-    break-inside: avoid;
-  }
-}
-
-.lineage-resource-selector.ui.multiple.dropdown > .label {
-  max-width: 180px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.lineage-events-panel {
-  display: flex;
-  min-height: 100%;
-  flex-direction: column;
-  gap: 10px;
-
-  .lineage-view__sidebar-content--events & {
-    &__scrollable {
-      --td-lineage-events-scrollbar-width: 16px;
-      --td-lineage-events-sidebar-offset: 21px;
-
-      box-sizing: border-box;
-      max-height: calc(var(--td-graph-container-height) - 98px);
-      padding-top: 4px;
-      width: calc(
-        100% + var(--td-lineage-events-scrollbar-width) +
-          var(--td-lineage-events-sidebar-offset)
-      );
-      margin-right: calc(
-        (
-            var(--td-lineage-events-scrollbar-width) +
-              var(--td-lineage-events-sidebar-offset)
-          ) *
-          -1
-      );
-      overflow-y: scroll;
-      padding-right: calc(
-        var(--td-lineage-events-scrollbar-width) +
-          var(--td-lineage-events-sidebar-offset)
-      );
-      scrollbar-color: #002057 transparent;
-      scrollbar-width: thin;
-
-      &::-webkit-scrollbar {
-        width: 6px;
-      }
-
-      &::-webkit-scrollbar-track {
-        border-radius: 3px;
-        background: transparent;
-      }
-
-      &::-webkit-scrollbar-thumb {
-        border-radius: 3px;
-        background: #002057;
-
-        &:hover {
-          background: #0040a8;
-        }
-      }
-    }
-
-    &__list {
-      gap: 12px;
-    }
-  }
-
-  &__header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    color: #202a3a;
-    font-size: 13px;
-    font-weight: 800;
-    letter-spacing: 0.08em;
-    line-height: 1.2;
-    text-transform: uppercase;
-
-    .icon {
-      margin: 0;
-      color: #96a1b3;
-      font-size: 18px;
-    }
-  }
-
-  &__list {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-  }
-
-  &__item {
-    padding: 10px;
-    border: 1px solid #e8edf3;
-    border-radius: 6px;
-    background: #ffffff;
-    box-shadow: 0 4px 14px rgba(21, 26, 36, 0.04);
-    transition:
-      border-color var(--td-lineage-menu-transition-duration)
-        var(--td-lineage-menu-transition-easing),
-      background-color var(--td-lineage-menu-transition-duration)
-        var(--td-lineage-menu-transition-easing),
-      box-shadow var(--td-lineage-menu-transition-duration)
-        var(--td-lineage-menu-transition-easing),
-      transform var(--td-lineage-menu-transition-duration)
-        var(--td-lineage-menu-transition-easing);
-
-    &:hover {
-      border-color: #d7dde6;
-      background: #ffffff;
-    }
-
-    &--clickable {
-      cursor: pointer;
-
-      &:hover {
-        border-color: #002057;
-        box-shadow: 0 6px 20px rgba(21, 26, 36, 0.1);
-        transform: translateY(-1px);
-      }
-
-      &:focus-visible {
-        outline: 2px solid #002057;
-        outline-offset: 2px;
-      }
-    }
-  }
-
-  &__item-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 12px;
-  }
-
-  &__item-title {
-    display: inline-flex;
-    min-height: 22px;
-    align-items: center;
-    gap: 6px;
-    padding: 3px 8px;
-    border-radius: 6px;
-    background: #f1f4f8;
-    color: #002057;
-    font-size: 11px;
-    font-weight: 800;
-    line-height: 1.2;
-
-    .icon {
-      margin: 0;
-      color: #58647a;
-    }
-  }
-
-  &__meta {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 4px 10px;
-    margin-top: 7px;
-    color: #526176;
-    font-size: 10px;
-    font-weight: 800;
-    line-height: 1.25;
-  }
-
-  &__scope {
-    display: -webkit-box;
-    margin: 6px 0 0;
-    overflow: hidden;
-    color: #66758a;
-    font-family: monospace;
-    font-size: 10px;
-    font-weight: 700;
-    line-height: 1.35;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-  }
-
-  &__row {
-    display: grid;
-    align-items: center;
-    padding-top: 6px;
-    border-top: 1px solid #eef2f6;
-  }
-
-  &__row-main {
-    display: flex;
-    min-width: 0;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: 6px 10px;
-  }
-
-  &__type {
-    display: inline-flex;
-    flex: 1 1 96px;
-    min-width: 0;
-    align-items: center;
-    gap: 6px;
-    overflow: hidden;
-    color: #2b3444;
-    font-size: 11px;
-    font-weight: 800;
-    line-height: 1.2;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-
-    .icon {
-      flex: 0 0 auto;
-      margin: 0;
-      color: #697386;
-      font-size: 12px;
-    }
-  }
-
-  &__date {
-    flex: 1 1 96px;
-    min-width: 0;
-    overflow: hidden;
-    color: #96a1b3;
-    font-size: 10px;
-    font-weight: 700;
-    line-height: 1.2;
-    text-align: right;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  &__card-status {
-    display: inline-flex;
-    flex: 0 0 auto;
-    align-items: center;
-    gap: 4px;
-    color: #697386;
-    font-size: 12px;
-    font-weight: 800;
-    line-height: 1;
-    text-transform: uppercase;
-
-    &--completed {
-      color: #159a6a;
-    }
-
-    &--failed {
-      color: #e23d5b;
-    }
-  }
-
-  &__card-status-trigger {
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
-    padding: 0;
-    border: 0;
-    background: transparent;
-    color: inherit;
-    cursor: inherit;
-    font-size: inherit;
-    font-weight: inherit;
-    line-height: inherit;
-    text-transform: inherit;
-
-    .icon {
-      margin: 0;
-      font-size: 14px;
-    }
-  }
-
-  &__card-status--failed &__card-status-trigger {
-    cursor: help;
-  }
-
-  &__empty {
-    display: flex;
-    min-height: 180px;
-    flex: 1 1 auto;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: 8px;
-    padding: 24px 8px;
-    color: #a2a9b8;
-    font-size: 11px;
-    font-weight: 600;
-    text-align: center;
-
-    .icon {
-      margin: 0;
-      color: #cbd3df;
-      font-size: 24px;
-    }
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    &__item,
-    &__item--clickable {
-      transition: none;
-    }
-  }
-}
-
-.structure-lineage {
-  position: relative;
-  width: 100%;
-  overflow: hidden;
-  margin-bottom: 0;
-  padding-bottom: 0;
-
-  &__download-button {
-    position: absolute;
-    top: 4%;
-    right: 1%;
-    z-index: 5;
-
-    span,
-    .ui.button,
-    .ui.popup {
-      pointer-events: auto;
-    }
-  }
-
-  .ui.grid {
-    margin: 0;
-    padding-bottom: 0;
-    padding-left: 0;
-    padding-right: 0;
-
-    > .row {
-      padding-top: 0;
-      padding-bottom: 0;
-      margin-bottom: 0;
-      margin-left: 0;
-      margin-right: 0;
-      padding-left: 0;
-      padding-right: 0;
-    }
-
-    > * {
-      padding-left: 0;
-      padding-right: 0;
-    }
-
-    > .row > .column {
-      padding-bottom: 0;
-      padding-left: 0;
-      padding-right: 0;
-    }
-  }
-
-  .dl {
-    height: 100%;
-    padding: 0;
-    margin: 0;
-
-    svg {
-      width: 100%;
-      height: 100% !important;
-      min-height: 340px;
-      background-color: #f7f8fa;
-      padding: 0;
-      margin: 0;
-      display: block;
-      margin-left: 0;
-      margin-right: 0;
-    }
-  }
-}