.modal {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: 100%;
  max-height: 100%;
  overflow: hidden;
  border: var(--control-border-width) solid var(--modal-border);
  border-radius: var(--modal-radius);
  background: var(--modal-background);
  color: var(--color-text-primary);
  box-shadow: var(--overlay-shadow-modal);
  opacity: 1;
  transform: scale(1);
  transition: opacity var(--overlay-duration) var(--overlay-easing), transform var(--overlay-duration) var(--overlay-easing);
}

.modal[data-size='small'] {
  max-width: var(--modal-max-width-small);
}

.modal[data-size='medium'] {
  max-width: var(--modal-max-width-medium);
}

.modal[data-size='large'] {
  max-width: var(--modal-max-width-large);
}

.modal[data-size='fullscreen'] {
  position: absolute;
  inset: 0;
  max-width: none;
  max-height: none;
  border: 0;
  border-radius: 0;
}

.modal[data-overlay-state='opening'],
.modal[data-overlay-state='closing'] {
  opacity: 0;
  transform: scale(var(--overlay-modal-scale));
}

.modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  min-width: 0;
  gap: var(--modal-gap);
  padding: var(--modal-padding);
  border-block-end: var(--control-border-width) solid var(--modal-border);
}

.modal__heading {
  min-width: 0;
}

.modal__title {
  margin: 0;
  font-size: var(--font-size-overlay-title);
  line-height: var(--overlay-heading-line-height);
}

.modal__description {
  margin-block-start: var(--space-1);
  color: var(--color-text-secondary);
  font-size: var(--font-size-control-md);
}

.modal__header-end {
  flex: 0 0 auto;
  align-self: center;
  min-width: 0;
  margin-inline-start: auto;
}

.modal__close {
  flex: 0 0 auto;
  margin-inline-start: auto;
}

.modal__header-end:not([hidden]) ~ .modal__close {
  margin-inline-start: 0;
}

.modal__body {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--modal-padding);
  -webkit-overflow-scrolling: touch;
}

.modal__content {
  min-width: 0;
}

.modal__loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--modal-loading-background);
}

.modal__spinner {
  width: var(--loading-indicator-size);
  height: var(--loading-indicator-size);
  border: var(--loading-indicator-width) solid var(--color-text-secondary);
  border-block-start-color: transparent;
  border-radius: 50%;
  animation: modal-loading var(--duration-loading) linear infinite;
}

.modal__footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--modal-gap);
  padding: var(--modal-padding);
  border-block-start: var(--control-border-width) solid var(--modal-border);
}

.modal__header[hidden],
.modal__heading[hidden],
.modal__title[hidden],
.modal__description[hidden],
.modal__header-end[hidden],
.modal__close[hidden],
.modal__loading[hidden],
.modal__footer[hidden] {
  display: none;
}

@keyframes modal-loading {
  to {
    transform: rotate(1turn);
  }
}