[data-component~="views/notes/index"] {
  #matching_notes_header {
    span:last-child {
      color: var(--color-base-400);
    }
  }
  #search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    input {
      flex-grow: 1;
    }
    [data-component~="components/button"] {
      flex-basis: 2rem;
    }
  }
  #list {
    [data-component~="components/list_group_item"] {
      display: flex;
      flex-direction: column;
      @media (width >= 640px) {
        flex-direction: row;
      }
      > :last-child {
        display: inline-block;
        text-align: left;
        @media (width >= 640px) {
          margin-left: auto;
          text-align: right;
        }
      }
      .draft {
        font-style: italic;
        margin-left: 0.5rem;
      }
    }
  }
}