@use '../../variables' as *;

$modal-size-small: 480px;
$modal-size-default: 600px;
$modal-size-large: 900px;

$modal-max-width: 90vw;
$modal-max-height: 90vh;

.modal {
  max-width: $modal-max-width;
  max-height: $modal-max-height;
  transition: width 0.2s ease-out;

  & > form {
    overflow: hidden;
  }
}

body {
  --modal-overlay-background: rgba(var(--color-black-rgb), var(--opacity-level-semiopaque));
}

.content {
  flex: 1;
  overflow: hidden;
  overflow-y: auto;
}

.overlay {
  width: 100vw;
  height: 100vh;
  inset: 0 0 0 0;
  background-color: var(--modal-overlay-background);
}

.buttons {
  margin-top: 8px;
}

// Modifiers

.-small {
  width: $modal-size-small;
}

.-default {
  width: $modal-size-default;
}

.-large {
  width: $modal-size-large;
}

// Without modal padding, the header still needs padding

.header[data-pad='true'] {
  padding: var(--space-l) var(--space-l) 0 var(--space-l);
}