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

.score-label {
  color: var(--pix-neutral-900);
  font-size: 0.625rem;
  letter-spacing: 0.156rem;
  text-transform: uppercase;
}

.score-value {
  @extend %pix-title-l;

  color: var(--pix-neutral-900);
  line-height: 2.875rem;
}

@mixin tutorial-panel-title($color) {
  @extend %pix-title-s;

  position: relative;
  z-index: 1;
  margin-bottom: 20px;
  color: var(--pix-neutral-800);

  // XXX Inspired from https://codepen.io/ericrasch/pen/Irlpm
  text-align: center;

  &::before {
    position: absolute;
    top: 50%;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    margin: 0 auto;
    border-top: 2px solid var(--pix-neutral-100);
    content: '';
  }

  span {
    display: inline;
    background: $color;
    box-shadow:
      15px 0 0 $color,
      -15px 0 0 $color;
    box-decoration-break: clone;
  }

  @include breakpoints.device-is('desktop') {
    line-height: 26px;
  }
}

.legal-notice {
  display: block;
  max-width: 100%;
  padding: 10px;
  font-size: 0.75rem;

  @include breakpoints.device-is('tablet') {
    padding: 10px 0;
  }
}
