@use '../../../../../../../../styles/typography';

:host {
  display: flex;
  flex-wrap: wrap;
  background: var(--octonary-contrast);
  padding: 0.5rem 1rem 0.25rem 0.5rem;
  border-top: 1px solid var(--senary-contrast);

  .node {
    @extend %body-01;
    position: relative;
    border-radius: 5px;
    background: var(--octonary-contrast);
    color: black;
    padding: 4px 25px 4px 15px;
    margin-bottom: 0.25rem;
    height: 28px;
    box-sizing: border-box;
    display: flex;
    align-items: center;

    &.type-env {
      background: var(--red-06);
    }

    &.type-element {
      background: var(--green-03);
    }

    &.type-imported {
      background: var(--purple-03);
    }

    &.type-hidden {
      display: none;
    }

    &:last-of-type {
      padding-right: 15px;
    }

    &::after,
    &::before {
      position: absolute;
      transform: rotate(-45deg);
      transform-origin: 0 100%;
    }

    &:not(:first-of-type)::after {
      content: '';
      background: inherit;
      width: 19px;
      height: 18px;
      top: calc(50% - 5px);
      left: 2px;
    }

    &:not(:last-of-type)::before {
      content: '';
      background: var(--octonary-contrast);
      width: 21px;
      height: 21px;
      top: calc(50% - 6px);
      right: -19px;
    }

    &:not(:first-of-type) {
      margin-left: 12px;
    }

    &:not(:last-of-type) {
      margin-right: -14px;
    }
  }
}
