@use 'pix-design-tokens/breakpoints';
@use 'pix-design-tokens/typography';
@use 'pix-design-tokens/shadows';

.pix-modal {
  position: relative;
  left: 50%;
  width: min(32rem, calc(100% - var(--pix-spacing-4x)));
  margin-block: auto;
  background-color: var(--pix-neutral-0);
  border-radius: var(--pix-spacing-4x);
  transform: translateX(-50%);
  animation: fade-out-modal 0.3s ease-out forwards;

  .pix-overlay[open] & {
    animation: fade-in-modal 0.3s ease-out forwards;
  }

  &--default {
    @extend %pix-shadow-default;
  }

  &--orga {
    @extend %pix-shadow-orga;
  }

  &--certif {
    @extend %pix-shadow-certif;
  }

  &__content {
    @extend %pix-body-s;

    padding: var(--pix-spacing-4x) var(--pix-spacing-6x);
    color: var(--pix-neutral-900);
    background-color: var(--pix-neutral-0);

    p:last-child {
      margin-bottom: 0;
    }
  }

  &__footer {
    display: flex;
    flex-direction: column;
    gap: var(--pix-spacing-2x);
    padding: var(--pix-spacing-6x) var(--pix-spacing-6x) var(--pix-spacing-4x) var(--pix-spacing-6x);
    background-color: var(--pix-neutral-0);
    border-bottom-right-radius: var(--pix-spacing-4x) var(--pix-spacing-4x);
    border-bottom-left-radius: var(--pix-spacing-4x) var(--pix-spacing-4x);

    @include breakpoints.device-is('tablet') {
      flex-flow: row wrap;
      gap: var(--pix-spacing-4x);
      justify-content: flex-end;
    }
  }
}

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

  to {
    opacity: 1;
  }
}

@keyframes fade-out-modal {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}