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

.evaluation-shared-results-modal__overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  padding: 0;
  overflow: hidden;
  text-align: center; // Used to center horizontally the inline-block modal content
  // we inline the pix-neutral-800 value
  background-color: rgb(37 56 88 / 50%);
  transition: all 0.3s ease-in-out;

  // This block is used to center vertically the modal
  // if the content is less than 100vh
  // Inspired by https://mui.com/material-ui/react-dialog/#scrolling-long-content
  &::after {
    display: inline-block;
    width: 0;
    height: 100%;
    vertical-align: middle;
    content: '';
  }

  &--hidden {
    visibility: hidden;
    opacity: 0;
  }
}

.evaluation-shared-results-modal {
  @extend %pix-shadow-sm;

  display: inline-block;
  width: 100%;
  height: 100%;
  padding: var(--pix-spacing-4x);
  overflow: auto;
  color: var(--pix-neutral-800);
  text-align: center;
  vertical-align: middle; // Centered vertically with the .evaluation-shared-results-modal__overlay::after which is 100% height
  background-color: var(--pix-primary-10);

  &__header {
    display: flex;
    justify-content: end;
    margin-bottom: var(--pix-spacing-12x);
  }

  &__illustration {
    --illustration-img-width: 174px;
    --illustration-img-height: 137px;

    width: calc(var(--illustration-img-width) * 0.75);
    height: calc(var(--illustration-img-height) * 0.75);
    margin-bottom: var(--pix-spacing-4x);

    @include breakpoints.device-is('tablet') {
      width: initial;
      height: initial;
    }
  }

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

    margin-bottom: var(--pix-spacing-8x);
    padding-right: var(--pix-spacing-8x) + var(--pix-spacing-2x);

    @include breakpoints.device-is('tablet') {
      padding-right: var(--pix-spacing-10x) + var(--pix-spacing-2x);
    }
  }

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

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

  &__trainings {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 328px));
    gap: var(--pix-spacing-6x);
    justify-content: center;
    max-width: 1120px;
    margin: auto auto var(--pix-spacing-8x);
    text-align: start;
  }

  &__footer {
    display: flex;
    justify-content: center;
  }
}

@include breakpoints.device-is('tablet') {
  .evaluation-shared-results-modal {
    padding: 48px 80px;

    &__header {
      padding-top: 0;
    }
  }
}
