/**
 * Modals — general-purpose dialog overlay (WAI-ARIA dialog pattern)
 */
@use "../abstracts/variables" as v;

.#{v.class-seg()}modal {
  position: fixed;
  inset: 0;
  z-index: v.$modal-z;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: v.$space-4;
  box-sizing: border-box;

  &[hidden] {
    display: none !important;
  }
}

.#{v.class-seg()}modal__backdrop {
  position: absolute;
  inset: 0;
  background: v.$modal-backdrop;
  cursor: pointer;
}

.#{v.class-seg()}modal__panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: v.$modal-max-width;
  max-height: min(90vh, 40rem);
  border: v.$border-width-1 solid var(--border-default);
  border-radius: v.$border-radius-8;
  background: var(--surface-primary);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  box-sizing: border-box;

  :is(h1, h2, h3, h4, h5, h6) {
    margin: 0;
  }
}

.#{v.class-seg()}modal--sm .#{v.class-seg()}modal__panel {
  max-width: v.$modal-max-width-sm;
}

.#{v.class-seg()}modal--lg .#{v.class-seg()}modal__panel {
  max-width: v.$modal-max-width-lg;
}

.#{v.class-seg()}modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: v.$modal-gap;
  flex-shrink: 0;
  padding: v.$modal-padding;
  padding-block-end: v.$space-3;
  border-bottom: v.$border-width-1 solid var(--border-default);
}

.#{v.class-seg()}modal__title {
  flex: 1 1 auto;
  min-width: 0;
  padding-inline-end: v.$space-2;
}

.#{v.class-seg()}modal__close {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: v.$modal-close-target;
  height: v.$modal-close-target;
  margin: calc((v.$modal-close-target - 1.25rem) * -0.5);
  padding: 0;
  border: none;
  border-radius: v.$border-radius-8;
  background: transparent;
  color: var(--text-body);
  cursor: pointer;

  &:hover {
    background: var(--surface-muted);
    color: var(--text-heading);
  }

  &:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
}

.#{v.class-seg()}modal__body {
  flex: 1 1 auto;
  min-height: 0;
  padding: v.$modal-padding;
  overflow-y: auto;
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-medium);
  line-height: var(--line-height-body-medium);
  color: var(--text-body);
}

.#{v.class-seg()}modal__footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: v.$space-2;
  flex-shrink: 0;
  padding: v.$space-3 v.$modal-padding v.$modal-padding;
  border-top: v.$border-width-1 solid var(--border-default);
  background: var(--surface-muted);
}

body.#{v.class-seg()}modal-open {
  overflow: hidden;
}