.rli-noteList {
  --notelist--Background: var(--g-primary-Background);
  --notelist--item--Line-height: 3.6rem;

  > div > div {
    background-color: var(--notelist--Background);

    // overwrite background-color behind search bar
    > div:first-child {
      background-color: transparent;
      height: auto;
      width: 100%;
      padding: 1.2rem 0.6rem 1.2rem 1.2rem;
    }
  }

  .search-and-sort,
  .new-note-todo-buttons {
    align-items: center;
  }

  .search-bar {
    position: relative;

    input[type="search"] {
      @include focusRing;

      border: 1px solid var(--g-separatorColor);
      background: var(--g-controlBackgroundColor);
      border-radius: 0.6rem;
      color: var(--g-controlTextColor);
      font-size: 1.3rem;
      height: 2.8rem;
      max-height: none;
      padding: 0 0 0 3rem !important;
      width: 100%;
      flex: 1 0 100%;

      // reserve space for reset-button only when input is not empty
      &:not([value=""]) {
        padding-right: 2.5rem !important;
      }

      &::placeholder {
        color: var(--g-tertiaryLabelColor);
      }
    }

    &::after {
      @include icon(magnifyingglass);
      transform: translateY(-50%) scale(var(--s-icon-size-factor, 1));
      position: absolute;
      color: var(--g-secondaryLabelColor);
      font-size: calc(var(--u-font-family-icons, 1) * 1.7rem);
      font-weight: normal !important;
      top: 50%;
      left: 0.8rem;
      pointer-events: none;
    }

    // .icon-search is replaced by a crossmark icon after input (which is not
    // what we want). That's why we hide this element and use a pseudo-element
    // with the icon on .search-bar in stead.
    .icon-search {
      display: none;
    }

    // cross when input value !== empty
    .fa-times {
      font-size: 13px;
      font-weight: normal;

      &::after {
        @include icon(xmark-circle-fill);
        color: var(--g-secondaryLabelColor);
        display: block;
        position: absolute;
        right: 0.7rem;
        top: 50%;
        transform: translateY(-50%) scale(var(--s-icon-size-factor, 1));
      }
    }

    // the sort icon
    + div {
      position: absolute;
      right: 1rem;
    }
  }

  :has(> .new-note-todo-buttons) {
    flex-direction: row !important;
  }

  // 'add'-buttons next to search
  .new-note-todo-buttons {
    display: flex;
    order: 1;
    // reserve some space for the sort button that we hack to the right of the
    // items (using position: absolute)
    padding-right: 3.5rem;

    .new-todo-button,
    .new-note-button {
      background: none;
      border-radius: 0.6rem;
      border: none;
      cursor: default;
      margin-left: 0;
      min-height: 0;
      min-width: 0;
      padding: 0;
      max-height: none;
      max-width: none;
      height: 2.6rem;
      width: 2.6rem;

      &:focus-visible,
      &:hover {
        background: var(--g-quaternaryLabelColor);
      }

      &:before {
        color: var(--g-secondaryLabelColor) !important;
        display: block;
        font-size: var(--g-font-size-2);
        font-weight: 500;
        -webkit-font-smoothing: antialiased;
        transform: translateY(0.05rem);
      }

      span {
        display: none;
      }
    }

    .new-note-button {
      margin-left: 0.1rem;
    }

    .new-todo-button:before {
      @include icon(checkmark-circle);
    }

    .new-note-button:before {
      @include icon(square-and-pencil);
    }
  }

  .sort-order-field-button {
    border: none;
    cursor: default;
    border-radius: 0.6rem;
    background-color: transparent;

    .fas,
    .far {
      font-size: var(--g-font-size-2);
      font-weight: 500;
      color: var(--g-secondaryLabelColor);
    }

    // Sort by:
    // updated date
    .fa-calendar-alt::before {
      @include icon(clock);
    }

    // created date
    .fa-calendar-plus::before {
      @include icon(calendar);
    }

    // title
    .fa-font::before {
      @include icon(character);
    }

    // todo due
    .fa-calendar-check::before {
      @include icon(checkmark-square);
    }

    // todo completed
    .fa-check::before {
      @include icon(checkmark-square);
    }

    // custom
    .fa-wrench::before {
      @include icon(arrow-up-arrow-down);
    }

    &:focus-visible,
    &:hover {
      background: var(--g-quaternaryLabelColor);
    }
  }

  .sort-order-reverse-button {
    background: var(--notelist--Background) !important;
    border: none;
    border-radius: 50%;
    height: 1.2rem !important;
    margin-left: -11px !important;
    min-height: 0;
    padding: 0;
    position: relative;
    top: 13px !important;
    width: 1.2rem;
    cursor: default;

    .fa-long-arrow-alt-down,
    .fa-long-arrow-alt-up {
      &::before {
        color: var(--g-secondaryLabelColor);
        font-weight: 700;
        font-size: 10px;
      }
    }

    .fa-long-arrow-alt-up::before {
      @include icon(arrow-up-circle-fill);
    }

    .fa-long-arrow-alt-down::before {
      @include icon(arrow-down-circle-fill);
    }
  }

  // note list + items
  .note-list {
    padding: 0 1rem 1rem;
    width: auto !important;
    overflow: hidden overlay !important;

    & .title {
      color: var(--g-textColor) !important;
      font-size: 1.2rem !important;
    }

    // remove last border in notelist
    div:nth-last-of-type(2):not(:empty):before {
      content: none;
    }
  }

  // For when 'Note list style' is set to 'Detailed'
  :has(.note-list-header) {
    color: var(--g-labelColor) !important;
    font-size: 1.2rem !important;
    font-family: "Courier New", Courier, monospace !important;

    .note-list-header {
      font-weight: 500;
      border-bottom: 0.1rem solid var(--g-separatorColor);
      margin: 0 1rem 0 1.5rem;

      .-first {
        .inner {
          padding: 0;
        }
      }

      [data-name="note.is_todo"] .inner {
        display: none;
      }
    }

    .row {
      gap: 1rem !important;

      &:hover {
        background: transparent;
      }

      .item {
        opacity: 1 !important;
        padding-right: 0.5rem !important;

        &:not(:first-child) {
          padding-left: 0 !important;
        }
      }

      &.-selected {
        background: var(--s-accentColor--selected) !important;
        border-radius: 0.4rem;
        color: var(--g-alternateSelectedControlTextColor) !important;
      }
    }
  }

  .todo-list-item,
  .note-list-item {
    border-radius: 0.4rem;
    height: auto;
    line-height: var(--notelist--item--Line-height);

    // remove divider
    &.odd::before,
    &.even::before {
      content: var(--u-note-list-dividers, "");
    }

    &.odd {
      background: var(
        --u-note-list-zebra-color-odd,
        var(--g-alternatingContentBackgroundColorsOdd)
      );
    }
    &.even {
      background: var(
        --u-note-list-zebra-color-even,
        var(--g-alternatingContentBackgroundColorsEven)
      );
    }

    &:hover {
      background-color: transparent;
    }

    a {
      padding: 0 1rem !important;
      font-size: 1.2rem !important;
      // color: var(--g-textColor) !important;
      color: var(--g-labelColor) !important;
    }

    .fa-share-square {
      order: 1;
      margin-left: auto;
      &::before {
        @include icon(arrow-up-right-square-fill);
        color: var(--s-accentColor);
        font-weight: 400;
      }
    }

    mark {
      background: var(--g-systemYellow);
      color: var(--g-textColorDark) !important;
      border-radius: 0.2rem;
    }

    & > .content.-selected {
      background: var(--s-accentColor--selected) !important;
      border-radius: 0.4rem;

      a,
      span {
        color: var(--g-alternateSelectedControlTextColor) !important;
      }

      // search highlight
      mark {
        background: var(--g-systemYellow);
        color: var(--g-textColorDark) !important;
      }

      &:before {
        top: -1px;
        bottom: auto;
        border-color: var(--notelist--Background);
      }

      .fa-share-square::before {
        color: var(--g-alternateSelectedControlTextColor);
      }

      + .-selected {
        &:before {
          border-color: transparent;
        }

        &:after {
          content: "";
          background-color: var(--g-separatorColor);
          position: absolute;
          height: 0.1rem;
          top: 0.4rem;
          left: 1rem;
          right: 1rem;
        }
      }
    }

    &::before {
      border-color: var(--g-separatorColor);
      left: 10px;
      right: 0px;
      width: auto;
    }

    > a > span {
      color: inherit;
      font-family: var(--s-font-family-system);
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  .todo-list-item {
    > div {
      padding-left: 1rem !important;
    }

    input {
      align-items: center;
      appearance: none;
      border-radius: 50%;
      border: 0.1rem solid var(--g-tertiaryLabelColor);
      display: flex;
      height: 1.5rem;
      justify-content: center;
      margin: 0 -0.3rem -0.2rem 0 !important;
      position: relative;
      width: 1.5rem;

      &:checked {
        background-color: var(--s-controlAccentColor);
        border-color: transparent;

        &:after {
          @include icon(checkmark);
          position: absolute;
          color: var(--g-alternateSelectedControlTextColor);
          font-size: 0.9rem;
        }
      }
    }

    &.-selected input {
      border-color: hsla(var(--g-controlColor--hsl), 0.5);

      &:checked {
        border-color: transparent;
        background-color: rgba(
          var(--g-alternateSelectedControlTextColor--rgb),
          0.898
        );

        &:after {
          color: var(--s-accentColor);
        }
      }
    }
  }

  > div > div > div:last-child {
    background-color: transparent !important;
  }

  // fix: remove obsolete border
  > div > div > div:last-child {
    border-right: none;
  }
}
