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

.certification-instructions {
  min-height: 100vh;
  padding: 32px 80px;
  background: colors.$pix-primary-certif-gradient;
}

.instructions-header {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: start;
  margin-bottom: 80px;
  font-size: 1.125rem;

  &__logo {
    max-width: 60px;
  }

  &__separator {
    width: 1px;
    height: 32px;
    background-color: var(--pix-neutral-0);
  }

  &__title {
    color: var(--pix-neutral-0);
  }
}

.instructions-step {
  display: flex;
  flex-direction: column;
  gap: var(--pix-spacing-8x);
  max-width: 846px;
  margin: auto;
  padding: 24px;
  border-radius: 24px;

  &__title {
    @extend %pix-title-m;
  }
}

.instructions-footer {
  display: flex;
  flex-flow: column wrap;
  gap: var(--pix-spacing-8x);
  align-items: center;
  justify-content: start;

  &__buttons {
    display: flex;
    gap: 32px;
  }
}

.instructions-content {
  display: flex;
  flex-direction: column;

  &__title {
    @extend %pix-title-xs;

    padding-bottom: var(--pix-spacing-3x);
    font-weight: 700;
    line-height: 2.1;
  }

  &--type-columns,
  &__illustration--type-columns {
    display: grid;
    grid-template-columns: 1fr 4fr;
    gap: var(--pix-spacing-12x);
    align-items: center;
  }

  &__illustration {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;

    &--type-columns {
      &:not(:last-child) {
        margin-bottom: var(--pix-spacing-8x);
      }

      .instructions-content__title {
        &--bold {
          @extend %pix-title-xs;

          padding-bottom: 0;
          line-height: normal;
        }
      }
    }

    > img {
      min-width: 120px;
      max-width: fit-content;
      min-height: 120px;
    }
  }

  &__legend {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;

    &--bold {
      @extend %pix-title-xs;

      font-weight: 700;
      line-height: 2.1;
    }
  }

  &__list {
    padding-bottom: var(--pix-spacing-4x);
    padding-left: var(--pix-spacing-12x);
    list-style: disc;

    &--decimal {
      list-style: decimal;
    }

    li {
      padding-left: var(--pix-spacing-4x);
    }
  }

  &__paragraph {
    padding-bottom: var(--pix-spacing-4x);

    &--light {
      padding-bottom: var(--pix-spacing-6x);
      font-size: 0.875rem;
    }
  }

  &__text {
    display: flex;
    flex-direction: column;
    gap: var(--pix-spacing-8x);
    align-items: center;

    > p {
      width: 100%;
      padding-bottom: 0;
    }
  }


}

.instructions-footer-dots {
  &__dot {
    vertical-align: middle;
  }

  &__dot.active {
    height: 10px;
    filter: brightness(0) saturate(100%) invert(17%) sepia(28%) saturate(7283%) hue-rotate(246deg) brightness(90%)
      contrast(94%);
  }
}
