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

.evaluation-results {
  min-height: 100dvh;
  padding: var(--pix-spacing-12x) var(--pix-spacing-4x);
  color: var(--pix-neutral-900);
  background-color: var(--pix-primary-10);
}

/**
 * Evaluation Results Header
 */
.evaluation-results__header {
  display: flex;
  align-items: center;
  max-width: 1280px;
  margin: 0 auto var(--pix-spacing-8x);
}

.evaluation-results-header__logo {
  height: 2.75rem;
}

.evaluation-results-header__title {
  @extend %pix-body-l;

  display: flex;
  align-items: center;

  &::before {
    width: 1px;
    height: 2rem;
    margin: 0 var(--pix-spacing-4x);
    background-color: currentcolor;
    content: '';
  }
}

.evaluation-results-header__back-link {
  @extend %pix-body-l;

  margin-left: auto;
  font-weight: var(--pix-font-medium);

  &::after {
    margin-left: var(--pix-spacing-2x);
    font-size: 1rem;
    content: '✕';
    -webkit-text-stroke: 2px currentcolor;
  }
}

/**
 * Evaluation Results Hero
 */
.evaluation-results-hero {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pix-spacing-10x);
  justify-content: stretch;
  max-width: 80rem;
  margin: 0 auto var(--pix-spacing-10x);
  padding: var(--pix-spacing-6x);
  background-color: var(--pix-neutral-0);
  border: 1px solid var(--pix-neutral-100);
  border-radius: 1.5rem;
}

// Results
.evaluation-results-hero__results {
  flex: 1;
  min-width: min(20rem, 100%);
  padding: var(--pix-spacing-4x) var(--pix-spacing-6x) 9rem;
  text-align: center;
  background-color: var(--pix-primary-10);
  background-image: url('/images/illustrations/fusee-results.svg');
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: auto 7rem;
  border-radius: 1rem;
}

.evaluation-results-hero-results__percent {
  @extend %pix-title-xs;

  color: var(--pix-primary-700);
  font-weight: var(--pix-font-bold);

  strong {
    display: block;
    font-size: 4.5rem;
    line-height: 5.5rem;

    span {
      margin-left: 0.1em;
      font-size: 3.5rem;
      line-height: 0;
      vertical-align: -0.1em;
    }
  }
}

// Details
.evaluation-results-hero__details {
  flex: 4;
  min-width: min(25rem, 100%);
}

.evaluation-results-hero-details__title {
  @extend %pix-title-m;

  margin-bottom: var(--pix-spacing-4x);
}

.evaluation-results-hero-results__stars {
  margin-block: var(--pix-spacing-6x) var(--pix-spacing-3x);
  justify-content: center;
}

.evaluation-results-hero-details__stage-message {
  @extend %pix-body-l;

  margin-bottom: var(--pix-spacing-4x);

  &:not(:last-child)::after {
    display: block;
    height: 1px;
    background-color: var(--pix-neutral-100);
    content: '';
    margin-block: var(--pix-spacing-4x);
  }
}

.evaluation-results-hero-results__shared-message {
  display: inline-flex;
  margin-bottom: var(--pix-spacing-4x);
}

.evaluation-results-hero-details__explanations {
  @extend %pix-body-s;

  font-weight: var(--pix-font-bold);
}

.evaluation-results-hero-details__actions {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: var(--pix-spacing-6x);
  align-items: flex-start;
  margin-top: var(--pix-spacing-6x);
}

.evaluation-results-hero-results__actions-error {
  width: 100%;

  & > * {
    display: inline-flex;
  }
}

// Acquired badges
.evaluation-results-hero-details__acquired-badges-title {
  @extend %pix-title-xs;

  margin-block: var(--pix-spacing-8x) var(--pix-spacing-4x);
}

.evaluation-results-hero-details__acquired-badges {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr));
  gap: var(--pix-spacing-6x);

  .image-container {
    position: relative;
    padding: var(--pix-spacing-4x);
    overflow: hidden;
    background-color: var(--pix-neutral-20);
    border-radius: 0.5rem;
  }

  img {
    display: block;
    height: 5rem;
    margin: 0 auto;
  }

  .certifiable-label {
    @extend %pix-title-xs;

    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    color: var(--pix-success-700);
    font-size: 0.8125rem;
    line-height: 1.75rem;
    text-align: center;
    text-transform: uppercase;
    background-color: var(--pix-success-100);
  }

  .badge-name {
    @extend %pix-body-m;

    margin-top: var(--pix-spacing-2x);
    text-align: center;
  }
}

// Custom organization block
.evaluation-results-hero__organization-block,
.evaluation-results-hero__retry {
  flex-basis: 100%;
  padding-top: var(--pix-spacing-10x);
  border-top: 1px solid var(--pix-neutral-100);
}

.evaluation-results-hero-organization-block__link {
  width: fit-content;
  margin: 0 auto var(--pix-spacing-4x);
}

// Retry or reset block
.evaluation-results-hero__retry {
  display: grid;
  grid-template-columns: 1fr min(250px, 25%);
  gap: var(--pix-spacing-10x);

  &::after {
    background-image: url('/images/illustrations/results/retry-assessment.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    content: '';
  }

  @media (max-width: 767px) {
    display: block;

    &::after {
      content: none;
    }
  }
}

.evaluation-results-hero-retry__title {
  @extend %pix-title-l;

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

.evaluation-results-hero-retry__description {
  @extend %pix-title-xs;

  margin-top: var(--pix-spacing-1x);
  color: var(--pix-neutral-500);
}

.evaluation-results-hero-retry__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pix-spacing-4x);
  align-items: center;
  margin-block: var(--pix-spacing-4x);
  padding-block: var(--pix-spacing-1x);
}

.evaluation-results-hero-retry__soon-title {
  @extend %pix-body-m;

  margin-bottom: var(--pix-spacing-4x);
}

/**
 * Evaluation Results Tabs
 */
.evaluation-results-tabs {
  max-width: 66rem;
  margin: 0 auto;
}

.evaluation-results-tab__title {
  @extend %pix-title-s;

  margin-top: var(--pix-spacing-10x);
}

.evaluation-results-tab__description {
  @extend %pix-body-m;

  margin-top: var(--pix-spacing-2x);
  color: var(--pix-neutral-500);
}
