.tree {
  flex-grow: 1;
  overflow: auto;

  &::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  &::-webkit-scrollbar-button {
    width: 0;
    height: 0;
    display: none;
  }

  &::-webkit-scrollbar-thumb {
    background: #a2b4bc;
    border-radius: 50px;
    height: 6px;
    width: 6px;
    background-clip: padding-box;
    border: 3px solid transparent;
    transition: 0.25s ease-out;
  }

  &::-webkit-scrollbar-thumb:hover {
    border: 2px solid transparent;
  }

  &::-webkit-scrollbar-track {
    background: 0 0;
    border: none;
  }

  &::-webkit-scrollbar-track:hover {
    background: 0 0;
  }

  &::-webkit-scrollbar-corner {
    background: 0 0;
  }

  &-item {
    position: relative;
    height: 32px;
    display: flex;
    align-items: center;
    border-radius: var(--alinea-border-radius);
    margin: 0 12px;
    cursor: pointer;

    &-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 20px;
      margin-right: 4px;
      height: 20px;
      flex-shrink: 0;
      font-size: 12px;
    }

    &:hover,
    &:has(button:focus-visible) {
      color: inherit;
      background: var(--alinea-highlight);
    }

    &.is-drop {
      outline: 2px solid var(--alinea-button-hover);
    }

    &.is-dropAbove {
      &:before {
        pointer-events: none;
        content: '';
        position: absolute;
        display: block;
        height: 2px;
        background: var(--alinea-button-hover);
        width: 100%;
        bottom: 100%;
        left: 0;
        z-index: 1;
        transform: translateY(1px);
      }
    }

    &.is-dropBelow {
      &:after {
        pointer-events: none;
        content: '';
        position: absolute;
        display: block;
        height: 2px;
        background: var(--alinea-button-hover);
        width: 100%;
        top: 100%;
        left: 0;
        z-index: 1;
        transform: translateY(-1px);
      }
    }

    &.is-selected {
      background: var(--alinea-selected);
      color: var(--alinea-selected-foreground);
    }
    &.is-selected &-label-itemName {
      font-weight: 600;
    }
    &.is-parentSelected {
      background: var(--alinea-selected-faded);
      border-radius: 0;
      &:hover {
        background: var(--alinea-selected);
      }
      &:not(:has(+ &)) {
        border-bottom-left-radius: var(--alinea-border-radius);
        border-bottom-right-radius: var(--alinea-border-radius);
      }
    }
    &:has(+ &.is-parentSelected) {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }

    &.is-archived {
      color: var(--alinea-variant-disabled-foreground);
      &.is-selected {
        background: var(--alinea-variant-disabled-background);
      }
      &.is-parentSelected {
        background: color-mix(
          in srgb,
          var(--alinea-variant-disabled-background) 40%,
          transparent
        );
        &:hover {
          background: var(--alinea-variant-disabled-background);
        }
      }
    }

    &.is-unpublished {
      color: var(--alinea-variant-create-foreground);
      &:hover {
        background: var(--alinea-variant-create-background);
      }
      &.is-selected {
        background: var(--alinea-variant-create-background);
      }
      &.is-parentSelected {
        background: color-mix(
          in srgb,
          var(--alinea-variant-create-background) 40%,
          transparent
        );
        &:hover {
          background: var(--alinea-variant-create-background);
        }
      }
    }

    &.is-archived &-label-itemName,
    &.is-untranslated &-label-itemName {
      opacity: 0.7;
    }

    &.is-selected.is-archived &-label-itemName {
      opacity: 1;
    }

    &-label {
      height: 100%;
      flex: 1 0 0;
      text-align: left;
      display: flex;
      align-items: center;
      padding: 0 12px 0 0;
      min-width: 0;
      cursor: pointer;

      &-itemName {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 13px;
        min-width: 50px;
        padding-right: 8px;
      }
    }

    &-arrow {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 11px;
      //margin-left: auto;
      height: 100%;
      flex-shrink: 0;
      cursor: pointer;
    }
  }

  &-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;

    :global(.rct-tree-item-title-container-selected) & {
      font-weight: 600;
    }
  }

  &-status {
    flex-shrink: 0;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 16px;
    padding: 0 4px;
    font-size: 11px;
    margin-left: auto;

    &.is-draft {
      color: var(--alinea-variant-info-foreground);
      background: var(--alinea-variant-info-background);
    }
    &.is-unpublished {
      color: var(--alinea-variant-create-foreground);
      background: var(--alinea-variant-create-background);
    }
    &.is-archived {
      color: var(--alinea-variant-disabled-foreground);
      background: var(--alinea-variant-disabled-background);
    }
    &.is-untranslated {
      color: var(--alinea-variant-disabled-foreground);
      background: var(--alinea-variant-disabled-background);
    }
    &.is-children {
      margin-left: auto;
      background: #f5f5f5;
      color: #1f1f1f;
    }
  }
}
