$activated-color: #868e96;
$button-width: 24px;


.sidebar-list-button-group {
  height: $item-height;
  color: gray;
  display: flex;

  .btn {
    border: 0;
    color: $activated-color;
  }

  .info-button,
  .hierarchy-button {
    width: $button-width;
    height: $item-height;
    padding-left: 0;
    padding-right: 0;
    padding-top: 17px;

    &:hover {
      color: darken($activated-color, 10%);
      background-color: darken($list-item-hover-color, 10%);
      transition: background-color .2s ease;
    }
  }

  .info-button {
    display: none;

    &.sidebar-list-button-group-active-button {
      display: block !important;
    }
  }

  .sidebar-list-button-group-active-button {
    background-color: darken($list-item-hover-color, 10%);

    @extend .btn, :active;
  }
}

#sidebar .resources-listing-item:hover .info-button {
  display: block;
}