@use './sizes.scss' as s;
@import './variables.scss';
@import './media-queries.scss';

$main-font: 'Press Start 2P', system-ui;
$main-line-height: 1.5;
$title-line-height: 1;
$letter-spacing: 0.05em;
$word-spacing: -0.3em;

@mixin title-size {
  font-family: $main-font;
  font-size: 30px;
  line-height: $title-line-height;
  font-weight: 400;
  letter-spacing: $letter-spacing;
  word-spacing: $word-spacing;

  @media (max-width: 992px) {
    font-size: 18px;
  }
}

@mixin paragraph-size {
  font-family: $main-font;
  font-size: 16px;
  line-height: $main-line-height;
  letter-spacing: $letter-spacing;
  word-spacing: $word-spacing;

  @media (max-width: 992px) {
    font-size: 12px;
  }
}

@mixin list-size {
  font-family: $main-font;
  font-size: 16px;
  line-height: $main-line-height;
  letter-spacing: $letter-spacing;
  word-spacing: $word-spacing;

  @media (max-width: 992px) {
    font-size: 12px;
  }
}

@mixin button-size {
  font-family: $main-font;
  font-size: 18px;
  line-height: 0.6;
  letter-spacing: $letter-spacing;
  word-spacing: $word-spacing;

  @media (max-width: 992px) {
    font-size: 16px;
  }
}

@mixin input-size {
  font-family: $main-font;
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: $letter-spacing;
  word-spacing: $word-spacing;

  @media (max-width: 992px) {
    font-size: 12px;
    word-spacing: -0.65em;;
  }
}

@mixin label-size {
  font-family: $main-font;
  font-size: 16px;
  line-height: 1;
  letter-spacing: $letter-spacing;
  word-spacing: $word-spacing;

  @media (max-width: 992px) {
    font-size: 11px;
  }
}
