@use '../tokens' as t;

@keyframes ultimate-dialog-in {
  from {
    opacity: 0;
    translate: 0 t.space(2);
  }
}

.dialog {
  inline-size: min(100% - #{t.space(8)}, var(--dialog-max, 32rem));
  max-block-size: min(88dvh, 60rem);
  padding: 0;
  border: 1px solid t.role('line');
  border-radius: t.radius(lg);
  background: t.role('surface-raised');
  color: t.role('fg');
  box-shadow: t.shadow(xl);
  overflow: clip;

  &[open] {
    animation: ultimate-dialog-in t.duration(base) t.easing(out);
  }

  @include t.scrim-backdrop($blur: t.rem(2px));
}

.size-sm {
  --dialog-max: 24rem;
}

.size-md {
  --dialog-max: 32rem;
}

.size-lg {
  --dialog-max: 48rem;
}

.size-full {
  --dialog-max: 100rem;
}

.panel {
  display: flex;
  flex-direction: column;
  max-block-size: inherit;
}

.header {
  display: flex;
  align-items: center;
  gap: t.space(3);
  padding-block: t.space(3);
  padding-inline: t.space(5);
  border-block-end: 1px solid t.role('line');
}

.title {
  flex: 1;
  min-inline-size: 0;
  font-size: t.text(lg);
}

.body {
  @include t.custom-scrollbar;
  padding: t.space(5);
  overflow-y: auto;
}

.footer {
  display: flex;
  flex-wrap: wrap;
  gap: t.space(3);
  justify-content: flex-end;
  padding-block: t.space(3);
  padding-inline: t.space(5);
  border-block-start: 1px solid t.role('line');
  background: t.role('bg-soft');
}