// Оболочка модальных окон (core-dialog / MatDialog)

.cdk-overlay-dark-backdrop {
  background: rgba(68, 83, 113, 0.45);
}

.mat-mdc-dialog-container .mdc-dialog__surface {
  border-radius: var(--MODAL-RADIUS);
  box-shadow: var(--MODAL-SHADOW);
  background: var(--WHITE);
  overflow-x: hidden;
}

.resizeble-dialog {
  max-width: 100%;
  max-height: 100% !important;
  resize: both;
  overflow: auto;
}

.mat-mdc-dialog-content {
  max-height: none !important;
}

.mdc-dialog__content {
  overflow: hidden !important;
}

.sln-core-dialog-modal {
  .modal-dialog.sln-modal-dialog {
    display: flex;
    min-width: 400px;
    max-width: calc(100vw - 32px);

    .mdc-dialog__title {
      cursor: grab;
      padding: 0;
      display: inline;
      width: auto;

      &::before {
        height: 0;
      }
    }

    .sln-modal-title,
    .mdc-dialog__title {
      margin: 0;
      padding: 0;
      display: inline;
      width: auto;
      color: var(--BLACK);
      font-family: var(--font-bold);
      font-size: 24px;
      font-weight: 700;
      line-height: 24px;
      text-transform: none;
      letter-spacing: 0;
      cursor: default;
      text-align: center;
      flex: 1;
      @media screen and (max-width: 768px) {
        font-size: 16px;
        line-height: 20px;
      }
    }
  }

  .modal-content {
    padding: 0 var(--MODAL-PADDING);
    width: 100%;
    border-radius: var(--MODAL-RADIUS);
    overflow: hidden;
  }

  .modal-header,
  .sln-header-search {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    margin: 0 0 0;
    padding: var(--MODAL-PADDING) 0;
    border-bottom: none;
  }

  .modal-body,
  .mat-mdc-dialog-content,
  .mdc-dialog__content {
    padding: 0 0 24px;
    margin: 0;
    color: var(--DARK-GREY);
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.45;
  }

  .modal-footer,
  [mat-dialog-actions].modal-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--MODAL-FOOTER-GAP);
    width: 100%;
    margin: 0;
    padding: var(--MODAL-PADDING) 0;
    border-top: none;
  }

  .sln-cancel-close {
    order: 1;
  }

  .modal-footer .btn-primary,
  .modal-footer .light-btn-primary,
  .modal-footer button:not(.sln-cancel-close) {
    order: 2;
  }
}

// info-dialog
.sln-core-info-dialog {
  .modal-header {
    padding: var(--MODAL-PADDING) 0 16px;
    border-bottom: none;

    h4,
    .modal-title {
      padding: 0;
      margin: 0;
      font-size: 20px;
      line-height: 24px;
      color: var(--BLACK);
      text-transform: none;
      font-family: var(--font-bold);
      font-weight: 700;

      @media screen and (max-width: 768px) {
        font-size: 16px;
        line-height: 20px;
      }
    }
  }

  .modal-text {
    width: 100%;
    margin: 10px 0;
    color: var(--WHITE);
    border-radius: var(--INPUT-RADIUS);
    background: var(--DANGER);
    padding: 10px;
    max-height: 80vh;
    overflow: auto;
  }

  .modal-footer {
    padding: 20px 0;
    border-top: 1px solid var(--LIGHT-GRAY);
    text-align: end;
    display: flex;
    justify-content: flex-end;
    gap: var(--MODAL-FOOTER-GAP);
  }
}

.sln-core-info-dialog:has(.alert-validation) {
  .modal-text {
    background: var(--WHITE);
    color: var(--DARK-GREY);
  }
}

.cdk-overlay-container {
  z-index: 10;
}
