.list__notes {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}
.list__notes .list__notes__item {
  display: flex;
  flex-direction: row;
  gap: var(--s-1);
  padding: var(--s-2);
  border-radius: var(--r-12);
  background: var(--c-surface);
  border: 1px solid transparent;
}
.list__notes .list__notes__item .list__notes__item__icon {
  display: flex;
  width: 48px;
  height: 48px;
  border-radius: var(--r-8);
  background: var(--c-surface-2);
  align-items: center;
  justify-content: center;
}
.list__notes .list__notes__item .list__notes__item__title {
  width: 100%;
  display: flex;
  align-items: center;
  font-size: var(--fs-14);
  font-weight: var(--fw-500);
  color: var(--c-text);
}
.list__notes .list__notes__item .list__notes__item__icons {
  display: flex;
  width: 48px;
  height: 48px;
  border-radius: var(--r-8);
  align-items: center;
  justify-content: center;
  background: var(--c-surface-2);
  flex-wrap: wrap;
  place-content: center;
}
.list__notes .list__notes__item .list__notes__item__icons > span {
  display: flex;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  color: var(--c-text-2);
  font-size: var(--fs-14);
  align-items: center;
  justify-content: center;
}
.list__notes .list__notes__item .list__notes__item__bookmark {
  display: flex;
  width: 48px;
  height: 48px;
  border-radius: var(--r-8);
  align-items: center;
  justify-content: center;
}
.list__notes .list__notes__item .list__notes__item__bookmark > .active {
  display: none;
}
.list__notes .list__notes__item .list__notes__item__bookmark > .inactive {
  display: inline-flex;
  opacity: 0.5;
}
.list__notes .list__notes__item .list__notes__item__bookmark:hover {
  background: var(--c-surface-2);
}
.list__notes .list__notes__item .list__notes__item__bookmark.active {
  background: var(--c-surface-2);
}
.list__notes .list__notes__item .list__notes__item__bookmark.active > .active {
  display: inline-flex;
}
.list__notes .list__notes__item .list__notes__item__bookmark.active > .inactive {
  display: none;
}
.list__notes .list__notes__item .list__notes__item__status {
  display: flex;
  flex-direction: row;
  width: fit-content;
  align-items: center;
  font-size: var(--fs-12);
  font-weight: var(--fw-500);
}
.list__notes .list__notes__item .list__notes__item__status > .list__notes__item__status__indicator {
  display: flex;
  width: var(--s-1);
  height: var(--s-1);
  border-radius: var(--r-8);
  background: var(--c-surface-2);
  align-items: center;
  justify-content: center;
  margin-right: var(--s-1);
}
.list__notes .list__notes__item .list__notes__item__status > .list__notes__item__status__indicator.active {
  background: var(--c-success);
}
.list__notes .list__notes__item:hover {
  background: #d8e8f5;
}