@use "../variables" as *;
@use "../mixins" as *;

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: $z-modal;
  // z-index: 1050;
  opacity: 0;
  visibility: hidden;
  transition: all $transition-base;

  &--open {
    opacity: 1;
    visibility: visible;
  }

  &__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(black, 0.5);
    cursor: pointer;
  }

  &__container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 90vw;
    max-height: 90vh;
    overflow-y: auto;
    cursor: default;
  }

  &__content {
    background: white;
    border-radius: $border-radius-lg;
    box-shadow: $shadow-lg;
    padding: 2rem;
    position: relative;

    @include media(md) {
      padding: 3rem;
      min-width: 500px;
    }
  }

  &__header {
    @include flex(row, space-between, center);
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid $border-color;
  }

  &__title {
    margin: 0;
    font-size: $font-size-2xl;
    font-weight: $font-weight-bold;
  }

  &__close {
    @include button-reset;
    width: 32px;
    height: 32px;
    @include flex(row, center, center);
    border-radius: 50%;
    background: $bg-secondary;
    color: $text-secondary;
    font-size: 18px;
    transition: all $transition-base;

    &:hover {
      background: $border-color;
      color: $text-primary;
    }
  }

  &__body {
    margin-bottom: 1.5rem;
  }

  &__footer {
    @include flex(row, flex-end, center);
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid $border-color;
  }
}

// Запрет скролла при открытом модальном окне
.modal-open {
  overflow: hidden;
}
