@import './scrollbar';

notes-view {
  width: 350px;
}

#notes-column,
.notes {
  width: 100%;

  border-left: 1px solid var(--sn-stylekit-border-color);
  border-right: 1px solid var(--sn-stylekit-border-color);

  font-size: var(--sn-stylekit-font-size-h2);

  flex-grow: 0;
  user-select: none;

  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;

  .empty-notes-list {
    flex-grow: 1;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--sn-stylekit-font-size-h3);
  }

  .content {
    display: flex;
    flex-direction: column;
  }

  #notes-title-bar {
    font-weight: normal;

    .section-title-bar-header .title {
      width: calc(90% - 45px);
    }

    p {
      font-size: var(--sn-stylekit-font-size-p);
    }
  }

  #notes-menu-bar {
    position: relative;
  }

  #notes-options-menu {
    margin-left: 10px;
  }

  .filter-section {
    clear: left;
    height: 28px;
    margin-top: 14px;
    position: relative;
    display: flex;
    align-items: center;

    .filter-bar {
      background-color: var(--sn-stylekit-contrast-background-color);
      border-radius: var(--sn-stylekit-general-border-radius);
      height: 100%;
      color: #909090;
      text-align: center;
      font-weight: normal;
      font-size: var(--sn-stylekit-font-size-h3);

      border-style: solid;
      border-color: transparent;
      width: 100%;
      position: relative;
    }

    #search-clear-button {
      padding: 0;
      border: none;
      border-radius: 50%;
      width: 17px;
      height: 17px;
      cursor: default;
      background-color: var(--sn-stylekit-neutral-color);
      color: var(--sn-stylekit-neutral-contrast-color);
      font-size: 10px;
      line-height: 17px;
      text-align: center;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 36px;
      cursor: pointer;

      transition: background-color 0.15s linear;

      &:hover {
        background-color: var(--sn-stylekit-info-color);
      }
    }
  }

  .infinite-scroll {
    @include minimal_scrollbar();
    height: inherit;
    background-color: var(--sn-stylekit-background-color);
  }

  .note {
    display: flex;
    align-items: stretch;

    width: 100%;
    cursor: pointer;

    &:hover {
      background-color: var(--sn-stylekit-grey-5);
    }

    .icon {
      display: flex;
      flex-flow: column;
      align-items: center;
      justify-content: space-between;
      padding: 1rem;
      padding-right: 0.75rem;
      margin-right: 0;
    }

    .meta {
      flex-grow: 1;
      min-width: 0;
      padding: 1rem;
      padding-left: 0;
      border-bottom: 1px solid var(--sn-stylekit-border-color);

      &.icon-hidden {
        padding-left: 1rem;
      }

      .name {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-weight: 600;
        font-size: 1rem;
        line-height: 1.3;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .flag-icons {
        &,
        & > * {
          display: flex;
          align-items: center;
        }

        & > * + * {
          margin-left: 0.375rem;
        }
      }

      .bottom-info {
        font-size: 12px;
        line-height: 1.4;
        margin-top: 0.25rem;
      }
    }

    .tags-string {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      margin-top: 0.345rem;
      font-size: 0.725rem;

      .tag {
        display: inline-flex;
        align-items: center;
        padding: 0.25rem 0.375rem 0.25rem 0.325rem;
        background-color: var(--sn-stylekit-grey-4-opacity-variant);
        border-radius: 0.125rem;
      }
    }

    .note-preview {
      font-size: var(--sn-stylekit-font-size-h3);
      overflow: hidden;
      text-overflow: ellipsis;

      & > * {
        margin-top: 0.15rem;
      }

      .default-preview,
      .plain-preview {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1; /* number of lines to show */
        line-height: 1.3;
        overflow: hidden;
      }

      .html-preview {
        margin-top: 4px;
        margin-bottom: 4px;
      }
    }

    .note-flag {
      color: var(--sn-stylekit-info-color);
    }

    .note-flags {
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-top: 0.125rem;

      .flag {
        padding: 4px;
        padding-left: 6px;
        padding-right: 6px;
        border-radius: var(--sn-stylekit-general-border-radius);
        margin-right: 4px;
        margin-top: 4px;

        &.info {
          background-color: var(--sn-stylekit-info-color);
          color: var(--sn-stylekit-info-contrast-color);
        }

        &.success {
          background-color: var(--sn-stylekit-success-color);
          color: var(--sn-stylekit-success-contrast-color);
        }

        &.warning {
          background-color: var(--sn-stylekit-warning-color);
          color: var(--sn-stylekit-warning-contrast-color);
        }

        &.neutral {
          background-color: var(--sn-stylekit-neutral-color);
          color: var(--sn-stylekit-neutral-contrast-color);
        }

        &.danger {
          background-color: var(--sn-stylekit-danger-color);
          color: var(--sn-stylekit-danger-contrast-color);
        }

        .label {
          font-size: 10px;
          font-weight: bold;
          text-align: center;
        }
      }
    }

    progress {
      background-color: var(--sn-stylekit-contrast-background-color);
      color: var(--sn-stylekit-info-color);
      border: none;

      &::-webkit-progress-bar {
        background-color: var(--sn-stylekit-contrast-background-color);
      }

      &::-webkit-progress-value {
        background-color: var(--sn-stylekit-info-color);
      }

      &::-moz-progress-bar {
        background-color: var(--sn-stylekit-info-color);
      }
    }

    &.selected {
      background-color: var(--sn-stylekit-grey-5);
      border-left: 2px solid var(--sn-stylekit-info-color);

      progress {
        background-color: var(--sn-stylekit-secondary-foreground-color);
        color: var(--sn-stylekit-secondary-background-color);

        &::-webkit-progress-bar {
          background-color: var(--sn-stylekit-secondary-foreground-color);
        }

        &::-webkit-progress-value {
          background-color: var(--sn-stylekit-info-color);
        }

        &::-moz-progress-bar {
          background-color: var(--sn-stylekit-secondary-background-color);
        }
      }
    }
  }
}