@import "../variables";

.fsc-note-list {
  overflow-x: hidden;
  overflow-y: auto;
  @include scrollbar();
  .fsc-note{
    padding: 0.25rem 0.5rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: nowrap;
    border-bottom: 1px solid;

    .fsc-note-details-wrapper{
      display: block;
      .fsc-note-title{
        margin: 0 0 0.5rem;
        font-size: 1.25rem;
        word-break: break-word;
        border-bottom-width: 0;
        text-align: left;
        text-transform: unset;
        font-family: var(--font-family);
      }

      .fsc-note-details{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;

        .fsc-note-icon{
          span{
            margin-right: 0;
          }
        }
      }
    }

    .fsc-sorting-dragger{
      padding: 0.5rem;
      margin: auto 0;
      border: 1px solid var(--note-list-note-dragger-bg-color);
      border-radius: 3px;
      cursor: move;
      background-color: var(--note-list-note-dragger-bg-color);
      box-shadow: 1px 1px 5px var(--note-list-note-dragger-box-shadow-color);
    }

    &:hover {
      cursor: pointer;
      color: var(--note-list-note-hover-color);
      background-color: var(--note-list-note-bg-hover-color);
    }

    &.fsc-drag-active{
      background-color: var(--note-list-note-bg-hover-color);
      .fsc-note-details-wrapper{
        visibility: hidden;
      }
    }
  }
}