@use 'variables' as *;

.fat-logic-tree {
  &__list {
    position: relative;

    &.has-label {
      padding-left: calc(32px + 8px);
    }
  }

  &__label {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    user-select: none;

    display: flex;
    flex-direction: column;
    align-items: center;

    &::before,
    &::after {
      content: '';
      display: block;
      width: 2px;
      flex: 1;
      background-color: var(--color);
    }

    &::before {
      margin-bottom: $fat-spacing-xs;
    }

    &::after {
      margin-top: $fat-spacing-xs;
    }

    &-content {
      display: inline-flex;
      align-items: center;
      background-color: var(--color);
      color: white;
      font-size: 14px;
      padding: 7px 0px;
      border-radius: 2px;
      width: 32px;
      writing-mode: vertical-lr;
      text-orientation: upright;
      cursor: pointer;
    }
  }
}