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

.qab-card {
  --qab-card-content-border-color: var(--pix-primary-300);

  display: grid;
  grid-area: center;
  width: 100%;
  max-width: 240px;
  min-height: 380px;
  padding: var(--pix-spacing-3x);
  background: var(--pix-neutral-0);
  border-radius: var(--pix-spacing-3x);
  box-shadow: 8px 8px 28px 0 rgb(0 0 0 / 25%);
  transition: translate 400ms ease-in, rotate 400ms ease-in, transform 250ms;

  &:nth-of-type(1) {
    z-index: 6;
    transform: scale(1) translateY(0%);
  }

  &:nth-of-type(2) {
    z-index: 5;
    transform: scale(0.9) translateY(9%);
  }

  &:nth-of-type(3) {
    z-index: 4;
    transform: scale(0.8) translateY(20%);
  }

  &:nth-of-type(4) {
    z-index: 3;
    transform: scale(0.7) translateY(34%);
  }

  &:nth-of-type(5) {
    z-index: 2;
    transform: scale(0.6) translateY(52%);
  }

  &:nth-of-type(6) {
    z-index: 1;
    transform: scale(0.5) translateY(77%);
  }

  &__container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: var(--pix-spacing-6x);
    border: var(--pix-spacing-2x) solid var(--qab-card-content-border-color);
    border-radius: var(--radius-s, 8px);
  }

  &--success {
      --qab-card-content-border-color: var(--pix-success-300);
  }

  &--error {
      --qab-card-content-border-color: var(--pix-error-500);
  }

  &--success.qab-card--removed {
    translate: -100vw -10vh;
    rotate: -20deg;
  }

  &--error.qab-card--removed {
    translate: 100vw -10vh;
    rotate: -20deg;
  }

  &--without-transition {
    transition: none;
    translate: none;
    rotate: none;
  }
}

.qab-card-container-content {
  display: flex;
  flex-direction: column;
  gap: var(--pix-spacing-4x);

  &__image {
    max-height: 190px;
    border-radius: var(--pix-spacing-2x);
  }

  &__text {
    @extend %pix-title-s;

    color: var(--pix-neutral-900);
    text-align: center;
  }
}

@include breakpoints.device-is('tablet') {
  .qab-card {
    max-width: 560px;
  }

  .qab-card-container-content {
    max-width: none;

    &__image {
      margin: auto;
    }
  }
}
