@use 'pix-design-tokens/breakpoints';
@use 'pix-design-tokens/typography';
@use '../globals/a11y' as *;

.challenge-item {
  padding: var(--pix-spacing-1x);
}

.challenge-response {
  @extend %pix-body-m;

  display: flex;
  flex-direction: column;
  margin: 4px;
  background-color: var(--pix-neutral-20);

  label {
    font-weight: var(--pix-font-normal);
  }

  a {
    color: var(--pix-primary-500);
    text-decoration: underline;

    @include breakpoints.device-is('tablet') {
      display: inline-block;
    }

    &:active,
    &:focus,
    &:hover {
      color: var(--pix-primary-700);
    }

    &::after {
      @include external-link;
    }
  }

  &__proposal {
    width: auto;

    &--paragraph {
      width: 100%;
      height: auto;
      resize: vertical;
    }

    &--sentence {
      width: 100%;

      .pix-input {
        display: flex;
      }
    }

    &--selector {
      display: inline-block;
      max-width: 100%;
      margin-bottom: 1rem;

      button {
        max-width: 100%;
      }

      .pix-select {
        max-width: 100%;
      }
    }

    &--selector:last-of-type {
      margin: 0;
    }

    &--input {
      margin: var(--pix-spacing-2x);
    }
  }

  &__proposal-label {
    width: 100%;
    font-weight: var(--pix-font-normal);
  }

  &__alert {
    margin: 4px;
  }
}

.proposal-text {
  width: 100%;
  font-weight: var(--pix-font-normal);
  line-height: 1.625rem;
  word-wrap: break-word;
  overflow-wrap: break-word;

  p {
    margin: 0;
  }
}

form .challenge-response {
  &--locked {
    position: relative;
  }

  &__locked-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
  }

  .challenge-response__instructions {
    @extend %pix-body-s;

    float: left;
    margin-top: 0;
    color: var(--pix-neutral-500);

    &:not(:last-child) {
      margin-bottom: 1rem;
    }
  }

  .qroc-proposal {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pix-spacing-2x);
    align-items: center;

    .qroc_input-label {
      display: inline;
    }

    ul,
    ol,
    p {
      margin: 0;
    }
  }
}

form .challenge-response.challenge-response--locked {
  &:hover {
    .challenge-response__locked-overlay {
      opacity: 1;
      transition: 0.9s ease;
    }
  }
}

form .challenge-response-locked {
  &__icon {
    width: 3.125rem;
    height: 3.125rem;

    &:hover {
      opacity: 1;
      transition: 0.3s ease;
    }
  }
}
