@use 'sass:math';

lf-tree-entry {
  .nav-item {
    &.active {
      box-shadow: $tree-nav-entry-active-box-shadow;
      background-color: $tree-nav-entry-active-bg-color;

      & > .item-content > .nav-link {
        color: $tree-nav-entry-active-color;
        font-weight: bold;
      }
    }

    &.is-warning > .item-content > .nav-link {
      color: $tree-nav-entry-warning-color;
    }

    &.is-invalid > .item-content > .nav-link {
      color: $tree-nav-entry-invalid-color;
    }
  }

  .item-content {
    display: flex;
    align-items: center;

    & > .value-add {
      margin: -$spacer math.div($spacer, 2) (-$spacer) 0;
      button {
        padding-top: 0;
        padding-bottom: 0;
      }
    }
  }

  .nav-link {
    flex: 1;
    position: relative;
    padding: math.div($spacer, 2.5) $spacer math.div($spacer, 2.5) $spacer * 2;
    font-size: $font-size-sm;
    color: $tree-nav-entry-color;

    &.is-disabled {
      color: $text-muted;
      cursor: not-allowed;
    }
  }
  a.nav-link:hover {
    color: $tree-nav-entry-active-color;
  }

  .item-icon {
    position: absolute;
    left: math.div($spacer, 2);
  }

  .status {
    margin-right: math.div($spacer, 2);
  }
  .pending {
    @include loading($pending-size, $pending-border-size);
  }
  .rejected {
    color: theme-color('danger');
    cursor: pointer;
  }

  // Button when displaying as root (bottom of nav)
  & > .value-add {
    padding: math.div($spacer, 2.5) $spacer;
  }
}