
.tags {
    width: 15%;

   .tags-title-bar {
    color: black;
    height: 55px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    font-size: 12px !important;
    color: rgba(black, 0.8);
  }

  .content {
    background-color: #f6f6f6 !important;
  }

  .tag-add-button {
    margin-top: -6px;
    background-color: #d7d7d7 !important;
    float: right;
    position: absolute;
    right: 12px;

    &:hover {
      background-color: rgba(#d7d7d7, 0.8) !important;
    }
  }

  .tag {
    height: 30px;
    padding: 5px 12px;
    cursor: pointer;
    transition: height .1s ease-in-out;
    position: relative;
    font-size: 14px;

    > .icon {
      float: left;
      padding-top: 6px;
      margin-right: 5px;
    }

    > .title {
      width: 80%;
      background-color: transparent;
      font-weight: 600;
      float: left;
      color: $main-text-color;
      border: none;
      cursor: pointer;
      text-overflow: ellipsis;
      width: 75%;
    }

    > .count {
      position: absolute;
      right: 17px;
      padding-top: 1px;
      font-weight: bold;
    }

    $tags-selected-color: #bdbdbd;

    &.selected {
      background-color: $tags-selected-color;
      color: $selected-text-color;
      > .title {
        color: $selected-text-color;
        cursor: text;
      }
    }

    /* When a note is dragged over tag */
    &.over {
      background-color: $tags-selected-color;
      color: $selected-text-color;
      border: 2px dashed white;
      > .title {
        color: $selected-text-color;
      }
    }

    &:hover:not(.selected) {
      background-color: $tags-selected-color;
      color: $selected-text-color;
      > .title {
        color: $selected-text-color;
      }
    }
  }
}
