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

.element-qab {
  display: flex;
  justify-content: center;

  &__container {
    display: flex;
    flex-direction: column;
    gap: var(--pix-spacing-6x);
    width: 100%;
  }

  &__instruction {
    font-weight: var(--pix-font-bold);
  }

  &__cards {
    display: grid;
    grid-template-areas: 'center';
    justify-items: center;
  }

  &__feedback {
    color: var(--pix-neutral-800);
    background: var(--pix-info-100);
  }

  &__retry-button {
    margin-bottom: var(--pix-spacing-2x);
  }

  &__proposals {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pix-spacing-3x);
    justify-content: center;
    max-width: 240px;
    height: 106px;
    margin: auto;
    margin-top: var(--pix-spacing-12x);
    transition: height 400ms;

    &--empty {
      height: 0;
      margin-top: 0;
    }
  }
}

.element-qab-cards {
  margin-bottom: var(--pix-spacing-6x);
}

@include breakpoints.device-is('tablet') {
  .element-qab {
    &__proposals {
      gap: calc(var(--pix-spacing-10x) * 2);
      max-width: none;
      height: 75px;

      &--empty {
        height: 0;
      }
    }
  }
}
