[data-theme="light"] dialog,
dialog {
  --dialog-max-width: 600px;
  --dialog-backdrop-bg: #15201b;
  --dialog-backdrop-opacity: .75;
  --dialog-bg: #fff;
  --dialog-color: inherit;
  --dialog-border-color: #DFDFDF;

  --dialog-padding-x: 1rem;
  --dialog-padding-y: 1rem;

  width: 100%;
  max-width: var(--dialog-max-width);
  border-width: 0;
  border-radius: .25rem;
  box-shadow: 0 .5rem 1rem hsla(0,0%,0%,.15);
  background-color: var(--dialog-bg);
  color: var(--dialog-color);
  padding: 0;
}

[data-theme="dark"] dialog {
  --dialog-backdrop-bg: #111513;
  --dialog-bg: #2A332F;
  --dialog-color: #fff;
  --dialog-border-color: #404a46;
}

dialog::backdrop {
  background-color: var(--dialog-backdrop-bg);
  opacity: var(--dialog-backdrop-opacity);
}

.dialog-header,
.dialog-footer {
  padding: var(--dialog-padding-y) var(--dialog-padding-x);
}

.dialog-header {
  border-bottom: 1px solid var(--dialog-border-color);
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid var(--dialog-border-color)
}

.dialog-title {
  font-size: 1.1rem;
  margin-bottom: 0;
}

.dialog-close {
  background: none;
  border-width: 0;
  line-height: 1px;
  width: 32px;
  height: 32px;
  border-radius: .25rem;
  position: absolute;
  top: .75rem;
  right: .75rem;
  background-color: hsla(0,100%,100%,.1);
  color: var(--dialog-color);
  fill: var(--dialog-color);
  cursor: pointer;
}

.dialog-close:hover,
.dialog-close:focus {
  opacity: .7;
}

.dialog-body {
  padding: var(--dialog-padding-y) var(--dialog-padding-x);
}

.dialog-body p {
  margin-top: 0;
}