.file_library-modal {
  .modal-mask {
    .modal-wrapper {
      .modal-container {
        display: flex;
        flex-direction: column;

        height: calc(100vh - 180px);
        width: auto;

        margin-top: calculateRem(90);
        margin-right: calculateRem(20);
        margin-bottom: calculateRem(90);
        margin-left: calculateRem(20);

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

        .modal-header {
          flex-shrink: 0;

          position: relative;

          & > h1 {
            margin-bottom: calculateRem(10);
          }

          & > .text {
            margin-bottom: calculateRem(20)
          }

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

            width: 60%;

            .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;
            }
          }

          .icon-container.close {
            position: absolute;
            top: 0;
            right: 0;

            cursor: pointer;
          }
        }
        .modal-body {
          flex-grow: 1;
          flex-shrink: 0;

          .file-library-container {
            .files-container {
              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(12.5% - 13.125px);

                cursor: pointer;

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

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

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

                &.selected {
                  position: relative;

                  border: solid 4px $admin-primary-color;

                  &::before {
                    content: "\f00c";
                    font-family: "Font Awesome 5 Pro";

                    position: absolute;
                    top: 0;
                    right: 0;

                    color: $admin-primary-color;
                  }
                }

                .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 {
            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;
              }
            }
          }

          .dropzone-container {
            padding-top: calculateRem(25);
            padding-right: calculateRem(20);
            padding-bottom: calculateRem(25);
            padding-left: calculateRem(20);

            background-color: #F6F6F6;
          }
        }
        .modal-footer {
          flex-shrink: 0;
          .buttons-container {
            display: flex;
            justify-content: flex-end;

            .button {
              &:not(:last-child) {
                margin-right: calculateRem(10);
              }
            }
          }
        }
      }
    }
  }
}