
// LEGACY 6.0

.modal-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: color(modal-overlay-bg);
    z-index: 300;
}

.modal-wrap {
	left: 0;
	max-width: 940px;
	margin: 0 auto;
	padding: 0 10px;
	position: absolute;
	right: 0;
	top: 40px;
	z-index: 101;
	display: none;
}

.modal-wrap--small {
	max-width: 550px;
}

.modal {
	background-color: color(bg-0);
	margin-bottom: 40px;
	padding: $sq-inset-m;
	position: relative;
	border-radius: $border-radius-large;
	@include shadow-modal;

	.title-bar {}

  .col { position: relative;}
}

.modal-wrap {
  &.modal-template-settings {
    .panel {
      padding: 0 15px;
    }
  }

  .m-close {
    height: 20px;
    top: 20px;
    right: 20px;

    &:before { font-size: 20px; }
  }

  &.modal-file {
    .panel {
      margin-bottom: 0;
    }

    .modal {
      padding-top: 45px;
      padding-bottom: 45px;
    }
  }

  &.modal-new-folder {
    .modal {
      padding: 0;
      margin: 0;
    }
  }
}

.modal--no-padding {
	padding: 0;
}

.m-close{
	color: color(text-secondary);
	position: absolute;
	right: 2px;
	text-decoration: none;
	top: -12px;
  width: 16px;
  height: 24px;
  z-index: 10;

		&:before{
			@extend %fa-icon;
			@extend .fal;

			content: fa-content($fa-var-times);
			font-size: 24px;
			line-height: 1;
		}

		&:hover{
			color: color(text-tertiary);
		}
}

@include m-custom-down(750px) {
  .m-close { right: -8px;}
}


.app-modal__dismiss {
  margin-bottom: 20px;

  a {
    color: color(text-secondary);
    font-weight: normal;

    &:before{
      @extend %fa-icon;
			@extend .fal;

      content: fa-content($fa-var-times);
      font-size: inherit;
      margin-right: 5px;
    }
  }

  span {
    color: color(text-secondary);
    opacity: 0.5;
  }
}

.app-modal[rel="modal-bulk-edit"] {

  .list-group {
    margin-top: 10px !important;
  }

  .list-item {
    background-color: color(bg-blank);

    .list-item__content {
      font-size: 0.9rem;

      .list-item__secondary {
        font-size: 0.8rem;
        margin-top: 3px;

        .danger-link {
          font-size: 0.8rem;
        }
      }
    }
  }



  .meta-info {
    font-size: 0.8rem;
    margin-top: 10px;
    text-align: right;
    display: block;

    .danger-link {
      cursor: pointer;
    }
  }
}
.modal-file {
  max-width: 100%;
  width: 98%;
  max-height: 90vh;
  overflow-y: auto;
  position: fixed;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
}

.modal-confirm-delete-file,
.modal-confirm-move-file,
.modal-confirm-rename-file {
  position: fixed;
}