#file_library_view {
  display: flex;
  flex-direction: column;

  height: 100%;

  .view-title {
    flex-shrink: 0;
  }
  .view-content {
    flex-grow: 1;

    display: flex;
    flex-direction: column;

    .top {
      margin-bottom: calculateRem(20);

      .search-and-filter {
        display: flex;
        align-items: center;

        width: 60%;

        margin-bottom: calculateRem(15);

        .search {
          flex-grow: 1;

          position: relative;

          margin-right: calculateRem(20);

          input[type=text] {
            width: 100%;

            padding-right: calculateRem(40);
          }

          .icon-container {
            position: absolute;
            top: calculateRem(8);
            right: calculateRem(10);

            margin-right: calculateRem(8);

            i {
              font-size: 16px;
              line-height: 1;
            }
          }
        }

        .component-filter_dropdown {
          flex-shrink: 0;
        }
      }
    }
    .dropzone-container {
      margin-bottom: calculateRem(25);

      padding-top: calculateRem(25);
      padding-right: calculateRem(20);
      padding-bottom: calculateRem(25);
      padding-left: calculateRem(20);

      background-color: #F6F6F6;
    }

    .files-container {
      flex-grow: 1;
      flex-shrink: 0;

      display: flex;
      flex-wrap: wrap;

      padding-top: calculateRem(25);
      padding-right: calculateRem(20);
      padding-bottom: calculateRem(25);
      padding-left: calculateRem(20);

      background-color: #F6F6F6;

      .file {
        width: calc(16.666667% - 12.5px);

        cursor: pointer;

        &:nth-child(n+7) {
          margin-top: calculateRem(15);
        }

        &:not(:nth-child(6n)) {
          margin-right: calculateRem(15);
        }

        &::after {
          content: "";
          padding-top: 98%;
          width: 100%;
          display: block;
        }

        .thumbnail {
          width: 100%;
          height: 100%;

          background-size: cover;
          background-position: center;
          background-color: $builda-midgray;
        }
      }
    }

    .no-matching-files {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      padding-top: calculateRem(55);
      padding-right: calculateRem(50);
      padding-bottom: calculateRem(55);
      padding-left: calculateRem(50);

      width: 100%;

      background-color: #F6F6F6;
      text-align: center;

      .icon-container {
        i {
          font-size: 64px;
          line-height: 64px;
        }
      }
    }

    .empty-state {
      flex-grow: 1;

      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      padding-top: calculateRem(55);
      padding-right: calculateRem(50);
      padding-bottom: calculateRem(55);
      padding-left: calculateRem(50);

      height: 100%;
      width: 100%;

      background-color: #F6F6F6;
      text-align: center;

      .icon-container {
        i {
          font-size: 64px;
          line-height: 64px;
        }
      }

      .vue-dropzone {
        width: 100%;

        margin-top: calculateRem(50);

        border: dashed 4px $disabled-gray;
        border-radius: 5px;

        background-color: transparent;

        &:hover {
          background-color: transparent;
        }
      }
    }
  }
}