// LineagePath Component Styles

.LineagePath {
  display: flex;
  flex-direction: column;
  gap: var(--theme-spacing-1);
}

.Step {
  display: flex;
  flex-direction: column;
  gap: var(--theme-spacing-1);

  &-node {
    display: flex;
    align-items: center;
    gap: var(--theme-spacing-2);
    padding: var(--theme-spacing-2);
    background-color: var(--theme-color-bg-2);
    border-radius: var(--theme-border-radius-1);
    cursor: pointer;
    transition: background-color 0.15s;

    &:hover {
      background-color: var(--theme-color-bg-3);
    }
  }

  &-icon {
    font-size: 14px;
  }

  &-label {
    font-size: 14px;
    font-weight: 500;
  }

  &-port {
    font-size: 12px;
    color: var(--theme-color-fg-default-shy);
    font-family: monospace;
  }

  &-transformation {
    padding: var(--theme-spacing-1) var(--theme-spacing-2);
    margin-left: var(--theme-spacing-4);
    font-size: 12px;
    color: var(--theme-color-fg-default-shy);
    background-color: var(--theme-color-bg-3);
    border-radius: var(--theme-border-radius-1);
    font-style: italic;
  }

  &-badge {
    display: inline-block;
    padding: 2px var(--theme-spacing-2);
    margin-left: var(--theme-spacing-4);
    font-size: 10px;
    font-weight: 600;
    background-color: var(--theme-color-primary);
    color: var(--theme-color-bg-1);
    border-radius: var(--theme-border-radius-1);
    text-transform: uppercase;
  }

  &-arrow {
    text-align: center;
    font-size: 16px;
    color: var(--theme-color-fg-default-shy);
    opacity: 0.5;
  }
}

.Crossings {
  margin-top: var(--theme-spacing-2);
  padding: var(--theme-spacing-2);
  background-color: var(--theme-color-bg-3);
  border-radius: var(--theme-border-radius-1);
  border-left: 3px solid var(--theme-color-primary);

  &-label {
    font-size: 12px;
    color: var(--theme-color-fg-default-shy);
    font-weight: 500;
  }
}
