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

.element-qcu {
  &__instruction {
    margin-bottom: var(--pix-spacing-2x);
    font-weight: var(--pix-font-bold);
  }

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

    color: var(--pix-neutral-500);
  }

  &__proposals {
    margin: var(--pix-spacing-4x) 0;

    @media (not (prefers-reduced-motion: reduce)) {
      .pix-label-wrapped--state-success,
      .pix-label-wrapped--state-error {
        transition:
          border 0.25s 0.25s,
          color 0.25s 0.25s;
      }
    }

    .pix-label-wrapped--variant-tile.pix-label-wrapped--disabled.pix-label-wrapped--state-error {
      color: var(--pix-warning-700);
      background-color: var(--state-background-color);
      border-color: var(--pix-warning-700);

      --state-background-color: var(--pix-warning-50);
    }

    .pix-label-wrapped--variant-tile.pix-label-wrapped--disabled.pix-label-wrapped--state-success {
      color: var(--pix-success-700);
      background-color: var(--state-background-color);
      border-color: var(--pix-success-700);

      --state-background-color: var(--pix-success-50);
    }

    .pix-label-wrapped--variant-tile.pix-label-wrapped--disabled .pix-label-wrapped__state-icon {
      background-color: var(--state-background-color);
    }
  }

  &__required-field-missing {
    margin-bottom: var(--pix-spacing-4x);
  }

  &__feedback {
    margin-top: var(--pix-spacing-1x);
    margin-bottom: var(--pix-spacing-4x);
  }
}
