.Sidebar {
  &__item {
    padding: 8px 12px;
    border-radius: 5px;
    transition: background-color 50ms linear;
    cursor: pointer;
    display: flex;
    align-items: center;

    &:hover,
    &--optionsOpened {
      background-color: var(--accent-4);

      .Sidebar__item__optionsBtn {
        visibility: visible !important;
      }
    }

    &__count {
      color: rgb(162, 162, 162);
      border-radius: 50%;
      margin-left: auto;
      font-size: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 15px;
      height: 15px;
      margin-left: 4px;
    }

    > svg {
      padding-right: 6px;
    }

    &--selected {
      background-color: var(--accent-10) !important;
      color: var(--accent-1);
    }

    &__optionsBtn {
      visibility: hidden !important;
    }
  }

  &__newFolderBtn {
    color: var(--gray-9);
    cursor: pointer;

    &:hover {
      color: var(--accent-10);
    }
  }
}

.Placeholder {
  &:hover {
    .Placeholder__emptyFolersMessage {
      color: inherit;
    }
  }

  &__emptyFolersMessage {
    padding-left: 8px;
    padding-right: 8px;
    color: white;
    transition: 3s ease-out;
  }
}
