/* Yaaleh Design System - modals.
   Source: YaalehDev/Comercial, branch homolog1404.
   Add ds-modal to a Bootstrap modal root when migrating a modal manually. */

:root {
  --modal-bg: var(--color-white);
  --modal-border: var(--color-grey-20);
  --modal-radius: 12px;
  --modal-header-padding: 16px 20px;
  --modal-body-padding: 16px 20px;
  --modal-footer-padding: 12px 20px;
  --modal-title-size: 18px;
  --modal-title-font: var(--font-family-heading);
  --modal-body-font: var(--font-family-body);
  --modal-title-weight: var(--font-weight-semibold);
}

.ds-modal .modal-dialog,
.modal.ds-modal .modal-dialog {
  width: 500px;
  max-width: min(500px, calc(100vw - 2rem));
  margin: 1rem auto;
}

.ds-modal .modal-dialog.modal-lg,
.modal.ds-modal .modal-dialog.modal-lg,
.ds-modal .ds-modal-dialog--lg {
  width: 800px;
  max-width: min(800px, calc(100vw - 2rem));
}

.ds-modal .modal-dialog.modal-xl,
.modal.ds-modal .modal-dialog.modal-xl,
.ds-modal .ds-modal-dialog--xl {
  width: 1140px;
  max-width: min(1140px, calc(100vw - 2rem));
}

.ds-modal.ds-modal--detalhes-carteira .modal-dialog,
.modal.ds-modal.ds-modal--detalhes-carteira .modal-dialog {
  width: min(96vw, 1480px);
  max-width: min(96vw, 1480px);
}

.ds-modal .modal-content,
.modal.ds-modal .modal-content {
  overflow: hidden;
  background: var(--modal-bg);
  border: 1px solid var(--modal-border);
  border-radius: var(--modal-radius);
  box-shadow: var(--modal-shadow);
}

.ds-modal .modal-header,
.modal.ds-modal .modal-header,
.ds-modal__header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--modal-header-padding);
  background: var(--bg-neutral-inverse-primary);
  border-bottom: 1px solid var(--modal-border);
}

.ds-modal .modal-title,
.modal.ds-modal .modal-title,
.ds-modal__title {
  margin: 0;
  color: var(--color-white);
  font-family: var(--modal-title-font);
  font-size: var(--modal-title-size);
  font-weight: var(--modal-title-weight);
  line-height: var(--line-height-tight);
}

.ds-modal .modal-body,
.modal.ds-modal .modal-body,
.ds-modal__body {
  padding: var(--modal-body-padding);
  color: var(--text-neutral-on-secondary);
  font-family: var(--modal-body-font);
  font-weight: var(--font-weight-light);
}

.ds-modal .modal-footer,
.modal.ds-modal .modal-footer,
.ds-modal__footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  padding: var(--modal-footer-padding);
  border-top: 1px solid var(--modal-border);
}

.ds-modal .btn-close,
.modal.ds-modal .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
  opacity: 1;
}

.ds-modal__close {
  position: absolute;
  top: 16px;
  right: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  padding: 0;
  color: var(--color-white);
  background: transparent;
  border: 0;
  cursor: pointer;
}

.ds-modal__close:hover {
  opacity: 0.8;
}

.ds-modal--custom-close .btn-close,
.modal.ds-modal--custom-close .btn-close {
  display: none !important;
}

.ds-modal .btn-close-custom,
.modal.ds-modal .btn-close-custom {
  position: absolute;
  top: 16px;
  right: 20px;
  z-index: 1055;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  padding: 0;
  color: var(--color-white);
  background: transparent;
  border: 0;
  cursor: pointer;
  opacity: 1;
}

.ds-modal .btn-close-custom:hover,
.modal.ds-modal .btn-close-custom:hover {
  opacity: 0.8;
}

.ds-modal .Select-menu-outer,
.ds-modal .Select-menu,
.modal.ds-modal .Select-menu-outer,
.modal.ds-modal .Select-menu,
.ds-modal [class*="menuList"],
.ds-modal [class*="MenuList"],
.ds-modal [class*="menuPortal"],
.ds-modal [class*="MenuPortal"] {
  z-index: 1060 !important;
}

.ds-modal input,
.ds-modal textarea,
.ds-modal select,
.ds-modal .form-control,
.ds-modal .ds-input,
.ds-modal .ds-textarea,
.ds-modal .ds-select,
.modal.ds-modal input,
.modal.ds-modal textarea,
.modal.ds-modal select,
.modal.ds-modal .form-control,
.modal.ds-modal .ds-input,
.modal.ds-modal .ds-textarea,
.modal.ds-modal .ds-select,
.ds-modal .Select-control,
.ds-modal .Select-input,
.ds-modal .Select-value,
.ds-modal .Select-placeholder,
.ds-modal .Select-option {
  font-family: var(--font-family-body) !important;
}