@use "pix-design-tokens/breakpoints";

// See https://www.figma.com/file/8RJ3aCSfdeQ8AZZVBBYKS8/Design-System-Pix?node-id=24%3A8

// Placeholder pour permettre l'utilisation dans une classe css si jamais le tag html a trop de classe
%-pix-title {
  font-weight: var(--pix-font-extrabold);

  // stylelint-disable-next-line custom-property-pattern
  font-family: var(--_pix-font-family-title);
}

%pix-title-l,
.pix-title-l {
  @extend %-pix-title;

  --font-size-title: 1.75rem;

  font-size: var(--font-size-title);
  line-height: 1.3;
  letter-spacing: calc(-0.02 * var(--font-size-title));

  @include breakpoints.device-is('tablet') {
    --font-size-title: 1.875rem;
  }

  @include breakpoints.device-is('desktop') {
    --font-size-title: 2rem;
  }
}

%pix-title-m,
.pix-title-m {
  @extend %-pix-title;

  --font-size-title: 1.5rem;
  --letter-spacing-title: -0.02;

  font-size: var(--font-size-title);
  line-height: 1.3;
  letter-spacing: calc(var(--letter-spacing-title) * var(--font-size-title));

  @include breakpoints.device-is('tablet') {
    --font-size-title: 1.625rem;
  }

  @include breakpoints.device-is('desktop') {
    --font-size-title: 1.75rem;
    --letter-spacing-title: -0.01;
  }
}

%pix-title-s,
.pix-title-s {
  @extend %-pix-title;

  --font-size-title: 1.375rem;

  font-size: var(--font-size-title);
  line-height: 1.3;
  letter-spacing: calc(-0.01 * var(--font-size-title));

  @include breakpoints.device-is('tablet') {
    --font-size-title: 1.375rem;
  }

  @include breakpoints.device-is('desktop') {
    --font-size-title: 1.5rem;
  }
}

%pix-title-xs,
.pix-title-xs {
  @extend %-pix-title;

  --font-size-title: 1.25rem;

  font-size: var(--font-size-title);
  line-height: 1.4;
  letter-spacing: calc(-0.01 * var(--font-size-title));
}

%pix-title-xxs,
.pix-title-xxs {
  @extend %-pix-title;

  --font-size-title: 1.125rem;

  font-size: var(--font-size-title);
  line-height: 1.625;
  letter-spacing: calc(-0.01 * var(--font-size-title));
}

%-pix-subtitle {
  font-weight: var(--pix-font-medium);

  // stylelint-disable-next-line custom-property-pattern
  font-family: var(--_pix-font-family-subtitle);
}

%pix-subtitle-l,
.pix-subtitle-l {
  @extend %-pix-subtitle;

  --font-size-subtitle: 1.5rem;

  font-size: var(--font-size-subtitle);
  line-height: 1.5;

  @include breakpoints.device-is('tablet') {
    --font-size-subtitle: 1.625rem;
  }

  @include breakpoints.device-is('desktop') {
    --font-size-subtitle: 1.75rem;
  }
}

%pix-subtitle-m,
.pix-subtitle-m {
  @extend %-pix-subtitle;

  --font-size-subtitle: 1.25rem;

  font-size: var(--font-size-subtitle);
  line-height: 1.5;

  @include breakpoints.device-is('tablet') {
    --font-size-subtitle: 1.375rem;
  }

  @include breakpoints.device-is('desktop') {
    --font-size-subtitle: 1.5rem;
  }
}

%pix-subtitle-s,
.pix-subtitle-s {
  @extend %-pix-subtitle;

  --font-size-subtitle: 1.125rem;

  font-size: var(--font-size-subtitle);
  line-height: 1.5;

  @include breakpoints.device-is('tablet') {
    --font-size-subtitle: 1.125rem;
  }

  @include breakpoints.device-is('desktop') {
    --font-size-subtitle: 1.25rem;
  }
}

%pix-subtitle-xs,
.pix-subtitle-xs {
  @extend %-pix-subtitle;

  --font-size-subtitle: 1rem;

  font-size: var(--font-size-subtitle);
  line-height: 1.5;

  @include breakpoints.device-is('tablet') {
    --font-size-subtitle: 1rem;
  }

  @include breakpoints.device-is('desktop') {
    --font-size-subtitle: 1.125rem;
  }
}

%pix-subtitle-xxs,
.pix-subtitle-xxs {
  @extend %-pix-subtitle;

  --font-size-subtitle: 0.875rem;

  font-size: var(--font-size-subtitle);
  line-height: 1.5;

  @include breakpoints.device-is('tablet') {
    --font-size-subtitle: 0.875rem;
  }

  @include breakpoints.device-is('desktop') {
    --font-size-subtitle: 1rem;
  }
}

%-pix-body {
  font-weight: var(--pix-font-normal);

  // stylelint-disable-next-line custom-property-pattern
  font-family: var(--_pix-font-family-body);
}

%pix-cta-s {
  @extend %-pix-body;

  font-weight: var(--pix-font-bold);
  font-size: 0.875rem;
  line-height: 1.429;
}

%pix-cta-l {
  @extend %-pix-body;

  font-weight: var(--pix-font-bold);
  font-size: 1.125rem;
  line-height: 1.556;
}

%pix-body-xs,
.pix-body-xs {
  @extend %-pix-body;

  font-size: 0.75rem;
  line-height: 1.5;
  letter-spacing: 0.02em;
}

%pix-body-s,
.pix-body-s {
  @extend %-pix-body;

  font-size: 0.875rem;
  line-height: 1.5;
}

%pix-body-m,
.pix-body-m {
  @extend %-pix-body;

  font-size: 0.875rem;
  line-height: 1.5;

  @include breakpoints.device-is('tablet') {
    font-size: 1rem;
  }
}

%pix-body-l,
.pix-body-l {
  @extend %-pix-body;

  font-size: 1rem;
  line-height: 1.5;

  @include breakpoints.device-is('tablet') {
    font-size: 1.125rem;
  }
}

%pix-monospace,
.pix-monospace {
  font-weight: var(--pix-font-normal);

  // stylelint-disable-next-line custom-property-pattern
  font-family: var(--_pix-font-family-monospace);
}

.pix-body-weight-medium {
  font-weight: var(--pix-font-medium);
}

.pix-body-weight-bold {
  font-weight: var(--pix-font-bold);
}