/**
  * @file
  * Modals, such as the page feedback popup form.
  **/

.ui-dialog {
  max-width: 100%;
}

.ui-widget.ui-widget-content {
  border: 1px solid var(--laurier-blue);
}

.ui-dialog .ui-dialog-titlebar {
  border: 1px solid var(--black);
  background-color: var(--light-grey);
}

/** @todo Something strange is happening with JavaScript where it initially loads the hover style,
    then switches to the other after some time or changes to the viewport.
    See #1013 for more discussion. **/
.ui-dialog .ui-dialog-titlebar-close {
  background: url("data:image/svg+xml,%3csvg width='12' height='12' fill='black' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11 1.318l-10 10M11 11.318l-10-10' stroke='%23ffffff' stroke-width='1.5'/%3e%3c/svg%3e")
    no-repeat 50%;
  background-color: var(--laurier-red);
}

.ui-dialog .ui-dialog-titlebar-close:is(:focus, :hover) {
  background: url("data:image/svg+xml,%3csvg width='12' height='12' fill='black' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11 1.318l-10 10M11 11.318l-10-10' stroke='%23db2c39' stroke-width='1.5'/%3e%3c/svg%3e")
    no-repeat 50%;
  background-color: var(--white);
}

.ui-dialog .ui-dialog-buttonpane {
  border-color: var(--laurier-gold);
}

/** Buttons **/
.ui-dialog-buttonset.form-actions {
  display: flex;
}

.ui-dialog .btn-outline-primary::before {
  background-position: 0;
  vertical-align: middle;
}

.ui-dialog .btn-outline-primary:is(:hover, :focus)::before {
  background-image: url('data:image/svg+xml,<svg class="bi bi-check" width="1em" height="1em" viewBox="0 0 16 16" fill="6b7036" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M13.854 3.646a.5.5 0 010 .708l-7 7a.5.5 0 01-.708 0l-3.5-3.5a.5.5 0 11.708-.708L6.5 10.293l6.646-6.647a.5.5 0 01.708 0z" clip-rule="evenodd"/></svg>');
}