#notes-column,
.notes {
  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);

  width: 350px;
  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 {
      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);
      }
    }
  }

  .scrollable {
    height: 100%;
  }

  .infinite-scroll {
    overflow-x: hidden;
    height: inherit;

    // Autohide scrollbar on Windows.
    @at-root {
      .windows-web &,
      .windows-desktop & {
        overflow-y: hidden;
        &:hover {
          overflow-y: auto;
          overflow-y: overlay; // overlay is not supported on ff, so keep previous statement up
        }
      }
    }
  }

  .note {
    width: 100%;
    padding: 15px;
    border-bottom: 1px solid var(--sn-stylekit-border-color);
    cursor: pointer;

    > .name {
      font-weight: 600;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    > .bottom-info {
      font-size: 12px;
      margin-top: 4px;
    }

    .tags-string {
      margin-top: 4px;
      font-size: 12px;
    }

    .note-preview {
      font-size: var(--sn-stylekit-font-size-h3);
      margin-top: 2px;

      overflow: hidden;
      text-overflow: ellipsis;

      .default-preview,
      .plain-preview {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1; /* number of lines to show */
        $line-height: 18px;
        line-height: $line-height; /* fallback */
        max-height: calc(#{$line-height} * 1); /* fallback */
      }

      .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-bottom: 8px;
      margin-top: -4px;

      .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-info-color);
      color: var(--sn-stylekit-info-contrast-color);

      .note-flags .flag {
        background-color: var(--sn-stylekit-info-contrast-color);
        color: 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-secondary-background-color);
        }

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