.navigation-column {
  background-color: var(--enas-navigation-col-background-color);
  color: var(--enas-navigation-col-foreground-color);
  padding: var(--enas-col-padding);

  @media screen and (min-width: 768px) {
    border-right: 1px solid var(--enas-border-color);
  }

  .navigation-pane {
    user-select: none;
    display: flex;
    flex-direction: column;

    .section-title-bar {
      font-size: 12px;

      .right {
        padding: 0px;
        background-color: transparent;
        align-items: center;
        flex-direction: row;
        cursor: pointer;
        display: flex;
      }
    }

    .nb-name {
      border: 0;
      background-color: transparent;
      font-size: 14px;
      cursor: pointer;
      transition: height 0.1s ease-in-out;
      width: 100%;
      user-select: none;

      &:focus {
        border: 0;
        outline: 0;
        box-shadow: none;
      }

      >.info {
        align-items: center;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        min-height: 35px;

        >.icon {
          display: flex;
          align-items: center;
          height: 100%;
          margin-right: 0.5rem;
        }

        >.title {
          background-color: transparent;
          font-weight: 600;
          border: none;
          cursor: pointer;
          text-overflow: ellipsis;
          flex-grow: 1;
          font-size: 1rem;
          text-align: left;
          overflow: hidden;

          &:focus {
            outline: 0;
            box-shadow: 0;
          }
        }

        .action {
          padding-right: 4px;
          padding-top: 1px;
          font-weight: 400;
          color: var(--enas-foreground-primary-color);
          min-width: 15px;
          text-align: right;
          visibility: hidden;
        }

        &:hover .action {
          visibility: initial;
        }
      }

      &.selected {
        >.tag-info {
          .title {
            cursor: text;
          }

          .count {
            font-weight: 700;
          }
        }
      }

      &:hover:not(.selected),
      &.selected,
      &.is-drag-over {
        background-color: var(--enas-background-secondary-color);
      }
    }
  }

  .bottom-action {
    position: absolute;
    bottom: 3rem;
    left: 0;
    width: 100%;
    padding: var(--enas-col-padding);
    cursor: pointer;
    user-select: none;
  }
}