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

.timed-challenge-instructions {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--pix-spacing-10x) var(--pix-spacing-6x);
  overflow: hidden;
  text-align: center;

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

    color: var(--pix-neutral-800);
    font-weight: var(--pix-font-bold);
  }

  &__secondary {
    @extend %pix-body-l;

    margin-top: var(--pix-spacing-3x);
    margin-bottom: 50px;
    color: var(--pix-neutral-800);
  }

  &__time {
    color: var(--pix-primary-500);
  }

  &__allocated-time {
    display: flex;
    gap: var(--pix-spacing-2x);
    align-items: center;
    height: 50px;
    margin: 0 auto;
    padding: var(--pix-spacing-1x) var(--pix-spacing-3x);
    color: var(--pix-neutral-800);
    font-size: 1.5rem;
    background-color: var(--pix-neutral-20);
    border-radius: 7px;
  }
}

.timed-challenge-instructions-allocated-time {
  &__icon {
    width: 2.5rem;
    fill: var(--pix-neutral-800);
  }
}

.timed-challenge-instructions-action {
  &__confirmation-button {
    margin-top: var(--pix-spacing-6x);
  }
}
