@use '../shadows';
@use './modal-util';

.overlay {
  display: flex;
  align-items: center;
  padding: var(--modal-overlay-padding);
  // ВАЖНО: для корректной прокрутки во flex-контейнере не надо использовать тут justify-content: center
}

.modal {
  width: var(--modal-width);
  height: var(--modal-height);
  max-height: var(--modal-max-height);
  min-height: var(--modal-min-height);
  border-radius: var(--modal-border-radius);
  box-shadow: var(--modal-box-shadow);
  flex-shrink: 0;
  margin: auto; // ВАЖНО: для корректной прокрутки во flex-контейнере
  position: relative; // ВАЖНО: для overlap
  z-index: 1;
  background-color: #fff;
}

.modal-layout {
  display: flex;
  flex-direction: column;
}

.size-s {
  @include modal-util.size-s;
}

.size-m {
  @include modal-util.size-m;
}

.size-l {
  @include modal-util.size-l;
}

.size-xl {
  @include modal-util.size-xl;
}

.size-fullscreen {
  @include modal-util.size-fullscreen;
}

.rounds-s {
  --modal-border-radius: 4px;
}

.rounds-m {
  --modal-border-radius: 8px;
}

.body {
  flex-grow: 1;
}

.overlap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  * {
    pointer-events: auto;
  }
}

.bottom-gap {
  flex-shrink: 0;
  border-radius: 0 0 8px 8px;
  height: 16px;
  background: #fff;
}