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

// ─── Block ────────────────────────────────────────────────────────────────────

// ─── Elements ────────────────────────────────────────────────────────────────

.modal__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: $spacing-4;
  animation: modal-fade-in 150ms ease;
}

.modal__panel {
  position: relative;
  background: var(--clr-surface, #{$color-surface});
  border-radius: $radius-xl;
  box-shadow: $shadow-xl;
  padding: $spacing-8;
  width: 100%;
  max-width: 440px;
  animation: modal-slide-up 180ms ease;
}

.modal__close-btn {
  position: absolute;
  top: $spacing-4;
  right: $spacing-4;
  background: none;
  border: none;
  color: $color-text-muted;
  cursor: pointer;
  padding: $spacing-1;
  border-radius: $radius-base;
  display: flex;
  align-items: center;
  transition: color $transition-fast, background $transition-fast;

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

.modal__icon-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: $spacing-5;
}

// ── Modifiers on modal__icon ───────────────────────────────────────────────
.modal__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: $primary-50;
  color: $primary-600;

  &--danger {
    background: #fef2f2;
    color: $color-error;
  }
}

.modal__title {
  font-size: $font-size-xl;
  font-weight: $font-weight-semibold;
  color: var(--clr-text, #{$color-text-primary});
  text-align: center;
  margin-bottom: $spacing-3;
}

.modal__body {
  font-size: $font-size-sm;
  color: $color-text-secondary;
  text-align: center;
  line-height: $line-height-relaxed;
  margin-bottom: $spacing-8;
}

.modal__footer {
  display: flex;
  gap: $spacing-3;

  > button { flex: 1; }
}

// ── Modifiers on modal__btn ────────────────────────────────────────────────
.modal__btn {
  padding: $spacing-3 $spacing-4;
  border-radius: $radius-base;
  font-size: $font-size-sm;
  font-weight: $font-weight-semibold;
  font-family: $font-family-base;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background $transition-fast, border-color $transition-fast;

  &--cancel {
    background: var(--clr-surface, #{$color-surface});
    color: $color-text-secondary;
    border-color: $color-border;

    &:hover { background: $gray-100; }
  }

  &--confirm {
    background: $color-primary;
    color: #fff;
    border-color: $color-primary;

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

  &--danger {
    background: $color-error;
    border-color: $color-error;

    &:hover { background: #dc2626; border-color: #dc2626; }
  }
}

// ─── Animations ───────────────────────────────────────────────────────────────

@keyframes modal-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes modal-slide-up {
  from { transform: translateY(16px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
