/**
 * @file
 * Manage styles for UI dialog.
 * Try as much as possible to reproduce the styles of the DSFR modal.
 */

.ui-dialog {
  padding: 0;
  max-height: 80vh !important; /* stylelint-disable-line declaration-no-important */
  filter: drop-shadow(var(--lifted-shadow));
}

.ui-dialog .ui-dialog-titlebar {
  margin: 0;
  padding: 4rem 2rem 0;
}

.ui-dialog .ui-dialog-title {
  --title-spacing: 0 0 1rem 0;

  margin: var(--title-spacing);
}

.ui-dialog .ui-dialog-content {
  margin-bottom: 4rem;
  padding: 0 2rem;
}

.ui-widget-content {
  background: var(--background-default-grey);
  color: var(--text-default-grey);
}

.ui-widget.ui-widget-content {
  border: 0;
}

.ui-widget-header {
  background: none;
  border: 0;
  color: var(--text-title-grey);
  font-size: 1.375rem;
  font-weight: 700;
}

@media (width >= 48em) {
  .ui-widget-header {
    font-size: 1.5rem;
    line-height: 2rem;
  }
}

.ui-dialog .ui-dialog-titlebar-close {
  top: 1rem;
  right: 2rem;
  margin: 0;
  padding: .25rem .75rem;
  width: auto;
  height: auto;
  min-height: 2rem;
  background: none;
  border: 0;
  text-align: right;
  text-indent: initial;
  color: var(--text-action-high-blue-france);
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.5rem;
  overflow: initial;
}

.ui-dialog .ui-dialog-titlebar-close:hover {
  background-color: var(--hover-tint);
}

.ui-dialog .ui-dialog-titlebar-close::after {
  --icon-size: 1rem;

  background-color: currentcolor;
  content: '';
  display: inline-block;
  flex: 0 0 auto;
  height: var(--icon-size);
  margin-left: .5rem;
  margin-right: -.125rem;
  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+PHBhdGggZD0ibTEyIDEwLjYgNC45NS00Ljk2IDEuNCAxLjRMMTMuNDIgMTJsNC45NiA0Ljk1LTEuNCAxLjRMMTIgMTMuNDJsLTQuOTUgNC45Ni0xLjQtMS40TDEwLjU4IDEyIDUuNjMgNy4wNWwxLjQtMS40eiIvPjwvc3ZnPg==");
  mask-size: 100% 100%;
  vertical-align: calc((.75em - var(--icon-size)) * .5);
  width: var(--icon-size);
}

.ui-dialog .ui-dialog-titlebar-close .ui-button-icon,
.ui-dialog .ui-dialog-titlebar-close  .ui-button-icon-space {
  display: none;
}