@supports selector(dialog::backdrop) {
  :where([uc-modal]) > dialog::backdrop {
    /* backdrop don't inherit theme properties */
    background-color: oklch(0 0 0 / 0.1);
  }
  :where([uc-modal])[strokes] > dialog::backdrop {
    /* TODO: it's not working, fix it */
    background-image: var(--modal-backdrop-background-image);
  }
}

:where([uc-modal]) > dialog[open] {
  transform: translateY(0px);
  visibility: visible;
  opacity: 1;
}

:where([uc-modal]) > dialog:not([open]) {
  transform: translateY(20px);
  visibility: hidden;
  opacity: 0;
}

:where([uc-modal]) > dialog {
  display: flex;
  flex-direction: column;
  width: min(var(--uc-dialog-width), 100%);
  max-width: min(calc(100% - var(--uc-padding) * 2), var(--uc-dialog-max-width));
  min-height: var(--uc-button-size);
  max-height: min(calc(100% - var(--uc-padding) * 2), var(--uc-dialog-max-height));
  margin: auto;
  padding: 0;
  overflow: hidden;
  background-color: var(--uc-background);
  border: 0;
  border-radius: calc(var(--uc-radius) * 1.75);
  box-shadow: var(--uc-dialog-shadow);
  transition:
    transform 0.4s ease,
    opacity 0.4s ease;
}

:where(.uc-contrast) :where([uc-modal]) > dialog {
  outline: 1px solid var(--uc-border);
}