@knadh/oat/css/dialog.css

Ultra-lightweight, zero dependency, semantic HTML/CSS/JS UI library

@layer components {
  dialog {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    width: min(100% - 2rem, 32rem);
    max-height: 85vh;
    margin: auto;
    padding: 0;
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-large);
    box-shadow: var(--shadow-large);
    overflow: hidden;

    opacity: 0;
    transform: scale(0.95);
    transition:
      opacity 150ms ease,
      transform 150ms ease,
      overlay 150ms ease allow-discrete,
      display 150ms ease allow-discrete;

    &:is([open], :popover-open) {
      opacity: 1;
      transform: scale(1);
    }

    @starting-style {
      &:is([open], :popover-open) {
        opacity: 0;
        transform: scale(0.95);
      }
    }

    &::backdrop {
      background-color: rgb(0 0 0 / 0);
      transition:
        background-color 150ms ease,
        overlay 150ms ease allow-discrete,
        display 150ms ease allow-discrete;
    }

    &:is([open], :popover-open)::backdrop {
      background-color: rgb(0 0 0 / 0.5);
    }

    @starting-style {
      &:is([open], :popover-open)::backdrop {
        background-color: rgb(0 0 0 / 0);
      }
    }

    & > header,
    & > form > header {
      display: flex;
      flex-direction: column;
      gap: var(--space-1);
      padding: var(--space-6);
      padding-block-end: 0;

      & > h1, & > h2, & > h3, & > h4, & > h5, & > h6 {
        margin-block-end: 0;
      }

      & > p {
        font-size: var(--text-7);
        color: var(--muted-foreground);
        margin-block-end: 0;
      }
    }

    & > p, & > div, & > section,
    & > form > p, & > form > div, & > form > section {
      padding: var(--space-6);
      overflow-y: auto;
    }

    & > footer,
    & > form > footer {
      display: flex;
      justify-content: flex-end;
      gap: var(--space-2);
      padding: var(--space-6);
      padding-block-start: 0;
    }
  }
}