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

.module-details {
  margin: 0 auto;
  padding-bottom: var(--pix-spacing-12x);

  &__content {
    @extend %pix-shadow-sm;

    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    background-color: var(--pix-primary-10);

    &__image {
      width: 100%;
      padding: var(--pix-spacing-8x);

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

  &__infos {
    max-width: var(--modulix-max-content-width);
    margin: 0 auto;
    padding: 0 var(--pix-spacing-6x);
  }
}

.module-details-image {
  &__illustration {
    display: block;
    width: auto;
    max-height: 100%;
    margin: 0 auto;
  }
}

.module-details-content {
  &__layout {
    max-width: var(--modulix-max-content-width);
    padding: var(--pix-spacing-10x) var(--pix-spacing-6x);
  }
}

.module-details-content-layout {
  &__title {
    @extend %pix-title-m;

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

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

  &__link {
    display: inline-flex;
  }
}

.module-details-infos {
  &__indications {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pix-spacing-3x);
    align-items: center;
    justify-content: space-evenly;
    margin: 0 var(--pix-spacing-4x) var(--pix-spacing-8x);
    padding: var(--pix-spacing-4x) var(--pix-spacing-8x);
    background-color: var(--pix-primary-100);
    border-radius: 0 0 var(--pix-spacing-4x) var(--pix-spacing-4x);
  }

  &__objectives {
    margin-bottom: var(--pix-spacing-8x);
  }
}

.module-details-infos-indications {
  &__category {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: var(--pix-font-bold);
  }
}

.module-details-infos-indications-category {
  &__title {
    @extend %pix-body-xs;

    display: flex;
    align-items: center;
    color: var(--pix-neutral-800);
    text-transform: uppercase;
  }
}

.module-details-infos-indications-category-title {
  &__icon {
    margin-right: var(--pix-spacing-1x);
  }
}

.module-details-infos-objectives {
  &__title {
    @extend %pix-title-s;

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

.module-details-content-layout-small-screen-modal {
  &__footer {
    margin-bottom: var(--pix-spacing-4x);
    text-align: right;
  }
}

.module-details-content-layout-small-screen-modal-footer-actions-item {
  &__button {
    width: 100%;
  }
}
