// Missing classnames/elements in UI (make a PR?):
// - classnames for sync states

.rli-sideBar {
  background: var(--s-sidebar__BackgroundColor);

  // fix resize handle
  > span > div {
    z-index: 1;
  }
}

.sidebar.sidebar {
  background-color: transparent;
  padding-top: 1rem;

  * {
    font-family: var(--s-font-family-system) !important;
  }

  > div {
    > div {
      // plus icon
      .-collapseall,
      .-newfolder {
        display: none;
        margin-right: 0;
        position: absolute;
        right: 0;
        padding: 0 0.5rem;

        span::before {
          @include icon(plus-circle);
        }
      }

      .-newfolder {
        right: 22px;
      }

      &:hover {
        button {
          display: block;
        }
      }
    }
    // notebook + tags label
    > div:first-child span,
    .folder-and-tag-list + div span,
    // name of element in Joplin v2
    .folders + div span {
      text-transform: none;
      color: var(--s-sidebar__label-Color);
      font-size: var(--s-sidebar__label-FontSize);
      font-weight: 700;
    }

    // all notes
    .all-notes {
      background: none;
      color: var(--s-sidebar__item-Color);

      a {
        font-size: 1.3rem !important;
        color: inherit;
      }
    }

    .list-item-container {
      border-radius: 4px;
      height: 2.8rem;
      margin: 0 10px;
      padding: 0;
      transition: none;

      &:hover {
        background: transparent;
      }

      &.selected {
        background: var(
          --u-sidebar-selected-item-color,
          var(--g-unemphasizedSelectedTextBackgroundColor)
        );
        .emoji-box,
        img {
          background-color: var(
            --u-sidebar-selected-item-color,
            var(--g-unemphasizedSelectedTextBackgroundColor)
          ) !important;
        }
      }

      // dropdown caret
      a:first-of-type {
        opacity: 1;
        padding-right: 0;
      }
    }

    .list-item {
      opacity: 1;
      display: flex;
      overflow: hidden;
      width: 100%;

      .title,
      .tag-label {
        color: var(--s-sidebar__item-Color);
        font-size: 1.3rem;
        font-weight: normal;
        // truncate text with ellipsis
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 1;
        line-height: 1.5 !important;
      }

      .note-count-label {
        display: block;

        padding-left: 0;
        margin-left: 5px;
        padding-right: 8px;
        color: var(
          --u-sidebar-note-count-label-color,
          var(--g-secondaryLabelColor)
        );
        opacity: 0.5;
        font-size: 1.1rem;
        line-height: 1;
        font-weight: 500;
      }

      // shared via Joplin Server:
      // <i class="fas fa-share-alt"></i>
      .fa-share-alt {
        &::before {
          @include icon(person-2);
          color: var(
            --u-sidebar-note-count-label-color,
            var(--g-secondaryLabelColor)
          );
          font-size: 11px;
          font-weight: 500;
        }

        // add margin when note-count is hidden
        &:last-child {
          margin-right: 8px;
        }
      }

      // emoji
      span[style*="font-size: 20px;"] {
        font-size: 16px !important;
      }
    }

    // name of element in Joplin v2
    .folders, 
    .tags,
    // name of element in Joplin v3
    .folder-and-tag-list {
      .list-item {
        &::before {
          color: var(--s-sidebar__icon-Color);
          margin-right: 0.7rem;
          font-weight: 400;
          font-size: 13px;
          -webkit-font-smoothing: antialiased;
        }
      }
    }

    // name of element in Joplin v2
    .folders, 
    // name of element in Joplin v3
    .folder-and-tag-list {
      .list-item {
        // when one of the folders has an emoji the DOM structure changes and an
        // extra folder icon is added by Joplin. Since there's no way to determine
        // (yet, Chrome version 102 doesn't have `has()`-support) is the `list-item`
        // has an emoji, we have to work around this by hiding the folder icon
        // appended by Joplin and move the emoji over the theme's folder icon.
        position: relative;

        div:first-child:first-of-type {
          margin-right: 0 !important;

          .fa-folder,
          .fa-trash {
            display: none;
          }
        }

        .emoji-box,
        img {
          align-items: center;
          background-color: var(--s-sidebar__BackgroundColor);
          display: block;
          font-size: 18px !important;
          left: 0;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
        }

        img {
          height: 16px !important;
          width: 16px !important;
        }

        .emoji-box {
          height: 18px !important;
          width: 18px !important;
        }

        &::before {
          @include icon(folder);
        }

        &:has(.fa-trash)::before {
          @include icon(trash);
        }

        &:has(.tag-label)::before {
          @include icon(tag);
        }
      }
    }

    .sidebar-expand-link {
      padding-right: 0;
    }

    .list-item-depth-0,
    .list-item-depth-1 {
      padding-left: 0.2rem;
    }
    .list-item-depth-2 {
      padding-left: 1.8rem;
    }
    .list-item-depth-3 {
      padding-left: 3.4rem;
    }
    .list-item-depth-4 {
      padding-left: 5rem;
    }
    .list-item-depth-5 {
      padding-left: 6.6rem;
    }
    .list-item-depth-6 {
      padding-left: 8.2rem;
    }
    .list-item-depth-7 {
      padding-left: 9.8rem;
    }
    .list-item-depth-8 {
      padding-left: 11.4rem;
    }
    .list-item-depth-9 {
      padding-left: 13rem;
    }
    .list-item-depth-10 {
      padding-left: 14.6rem;
    }
  }

  .far,
  .fas {
    opacity: 1 !important;

    &::before {
      font-size: 9px;
      font-weight: 700;
      -webkit-font-smoothing: antialiased;
    }

    &.fa-caret-right::before {
      @include icon(chevron-forward);
      color: var(--s-sidebar__chevron-Color);
    }

    &.fa-caret-down::before {
      @include icon(chevron-down);
      color: var(--s-sidebar__chevron-Color);
    }

    &.fa-caret-square-right::before,
    &.fa-caret-square-down::before,
    &.fa-plus::before {
      color: var(--g-tertiaryLabelColor);
      font-weight: 500;
      font-size: 14px;
      -webkit-font-smoothing: unset;
    }
  }

  // hide all icons in sidebar
  .icon-notebooks,
  .icon-tags,
  .icon-notes {
    display: none;
  }

  // sync
  > div:last-child {
    // Maybe use this rad spinner animation (which is like the macOS notes app
    // spinner) once classnames are in place for sync states

    // background-repeat: no-repeat;
    // background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='margin:auto;' width='30' height='30' viewBox='23 23 54 54' preserveAspectRatio='xMidYMid' display='block'%3E%3Crect x='46.5' y='23' rx='3.5' ry='3.84' width='7' height='16'%3E%3Canimate attributeName='opacity' values='1;0' keyTimes='0;1' dur='0.78125s' begin='-0.68359375s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='46.5' y='23' rx='3.5' ry='3.84' width='7' height='16' transform='rotate(45 50 50)'%3E%3Canimate attributeName='opacity' values='1;0' keyTimes='0;1' dur='0.78125s' begin='-0.5859375s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='46.5' y='23' rx='3.5' ry='3.84' width='7' height='16' transform='rotate(90 50 50)'%3E%3Canimate attributeName='opacity' values='1;0' keyTimes='0;1' dur='0.78125s' begin='-0.48828125s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='46.5' y='23' rx='3.5' ry='3.84' width='7' height='16' transform='rotate(135 50 50)'%3E%3Canimate attributeName='opacity' values='1;0' keyTimes='0;1' dur='0.78125s' begin='-0.390625s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='46.5' y='23' rx='3.5' ry='3.84' width='7' height='16' transform='rotate(180 50 50)'%3E%3Canimate attributeName='opacity' values='1;0' keyTimes='0;1' dur='0.78125s' begin='-0.29296875s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='46.5' y='23' rx='3.5' ry='3.84' width='7' height='16' transform='rotate(225 50 50)'%3E%3Canimate attributeName='opacity' values='1;0' keyTimes='0;1' dur='0.78125s' begin='-0.1953125s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='46.5' y='23' rx='3.5' ry='3.84' width='7' height='16' transform='rotate(270 50 50)'%3E%3Canimate attributeName='opacity' values='1;0' keyTimes='0;1' dur='0.78125s' begin='-0.09765625s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='46.5' y='23' rx='3.5' ry='3.84' width='7' height='16' transform='rotate(315 50 50)'%3E%3Canimate attributeName='opacity' values='1;0' keyTimes='0;1' dur='0.78125s' begin='0s' repeatCount='indefinite'/%3E%3C/rect%3E%3C/svg%3E");

    // fake a macOS tooltip which appears after a small delay for the sync status
    @keyframes tooltipTimeout {
      0% {
        opacity: 0;
      }
      99% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }

    // only show sync status on hover
    > div:first-child {
      opacity: var(--u-sidebar-synchronise-label, 0);
      pointer-events: none;

      background-color: var(
        --u-sidebar-synchronise-label,
        var(--g-unemphasizedSelectedContentBackgroundColor)
      );
      padding: var(--u-sidebar-synchronise-label, 0.4rem);
      position: var(--u-sidebar-synchronise-label, absolute);
      width: auto;
      bottom: 20px;
      box-shadow: var(
        --u-sidebar-synchronise-label,
        0 0 1px rgba(0, 0, 0, 0.4),
        0 2px 8px rgba(0, 0, 0, 0.2)
      );

      div {
        color: var(--s-sidebar__synchronise-label-Color);
      }
    }

    &:hover > div:first-child {
      animation: var(--u-sidebar-synchronise-label, tooltipTimeout 1s);
      opacity: 1;
    }

    button {
      border: none;
      justify-content: flex-start;
      padding: 0;
      text-align: left;
      font-size: 1.3rem;

      span {
        color: var(--s-sidebar__synchronise-Color);
      }

      &:hover span {
        color: var(--s-sidebar__synchronise-Color);
      }

      .icon-sync {
        font-size: inherit;
        transform-origin: 50% 48%;

        &::before {
          @include icon(arrow-triangle-2-circlepath);
          font-size: 1.2rem;
          -webkit-font-smoothing: antialiased;
        }
      }
    }
  }
}
