/* The dialog both Web Push pages share: a test on somebody else's device,
   removing one, rotating the keys (boards 187, 189-191, 195). */

/* The dialog. */
.push-dialog {
  width: 520px;
  row-gap: 18px;
}
.push-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  column-gap: 16px;
}
.push-dialog-head h2 {
  text-wrap: pretty;
}
.push-dialog-close {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  font: var(--t-body-primary-300);
  color: var(--c-neutral-9);
  cursor: pointer;
}
.push-dialog-close:hover {
  background: var(--c-neutral-1);
  color: var(--c-white);
}
.push-dialog-body {
  margin: 0;
  font: var(--t-body-primary-300);
  color: var(--c-neutral-11);
  text-wrap: pretty;
}
.push-dialog-keeps {
  margin: 0;
  font: var(--t-body-small-300);
  color: var(--c-neutral-9);
  text-wrap: pretty;
}
.push-preview,
.push-rotate-box {
  display: flex;
  flex-direction: column;
  row-gap: 8px;
}
.push-rotate-box {
  row-gap: 14px;
}
.push-preview.hidden,
.push-rotate-box.hidden,
.push-dialog-keeps.hidden {
  display: none;
}
.push-preview-label,
.push-rotate-label {
  font: var(--t-body-small-400);
  color: var(--c-neutral-9);
}
.push-rotate-label {
  color: var(--c-neutral-11);
}
.push-rotate-label code {
  font: var(--t-code-400);
  color: var(--c-white);
}
.push-preview-card {
  display: flex;
  align-items: flex-start;
  column-gap: 12px;
  padding: 14px;
  border: 1px solid var(--c-neutral-3);
  border-radius: 12px;
}
.push-preview-card img {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  flex-shrink: 0;
}
.push-preview-text {
  display: flex;
  flex-direction: column;
  row-gap: 2px;
  min-width: 0;
  font: var(--t-body-small-300);
  color: var(--c-neutral-11);
}
.push-preview-text strong {
  font: var(--t-body-small-500);
  color: var(--c-white);
}
.push-preview-host {
  color: var(--c-neutral-8);
}
.push-rotate-input {
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--c-neutral-3);
  border-radius: 8px;
  background: transparent;
  font: var(--t-code-400);
  color: var(--c-white);
  outline: none;
  transition: border-color var(--transition-default);
}
.push-rotate-input:focus {
  border-color: var(--c-neutral-8);
}
.push-dialog-actions {
  display: flex;
  justify-content: space-between;
  column-gap: 12px;
  padding-top: 4px;
}
/* Rotate stays shut until the name is typed (criterion 12). */
.push-dialog-actions .button.button-danger-filled:disabled,
.push-dialog-actions .button:disabled {
  opacity: 1;
  background: var(--c-red-dark);
  border-color: var(--c-red-dark);
  color: var(--c-neutral-9);
  cursor: not-allowed;
}