@use '../variables' as vars;
@use './layout';

@mixin input-label {
  color: vars.$gray-80;
  font-size: vars.$font-size-14;
  font-weight: vars.$font-medium;
  text-transform: none;
  display: block;
}

// uses heading objects defined in src/variables/_type
@mixin heading($heading) {
  font-family: vars.$font-rubik;
  font-weight: nth($heading, 5);
  font-size: nth($heading, 1);
  line-height: nth($heading, 3);

  @include layout.media-breakpoint(xxs) {
    font-size: nth($heading, 2);
    line-height: nth($heading, 4);
  }
  @include layout.media-breakpoint(xs) {
    font-size: nth($heading, 1);
    line-height: nth($heading, 3);
  }
}

@mixin h1 {
  @include heading(nth(vars.$headings, 1));
}

@mixin h2 {
  @include heading(nth(vars.$headings, 2));
}

@mixin h3 {
  @include heading(nth(vars.$headings, 3));
}

@mixin h4 {
  @include heading(nth(vars.$headings, 4));
}

@mixin h5 {
  @include heading(nth(vars.$headings, 5));
}

@mixin h6 {
  @include heading(nth(vars.$headings, 6));
}

@mixin p1 {
  font-family: vars.$font-rubik;
  font-size: vars.$font-size-18;
  line-height: vars.$line-height-base;

  @include layout.media-breakpoint(xxs) {
    font-size: vars.$font-size-16;
  }
  @include layout.media-breakpoint(xs) {
    font-size: vars.$font-size-18;
  }
}

@mixin p2 {
  font-family: vars.$font-rubik;
  font-size: vars.$font-size-14;
  line-height: vars.$line-height-base;

  @include layout.media-breakpoint(xxs) {
    font-size: vars.$font-size-14;
  }
  @include layout.media-breakpoint(xs) {
    font-size: vars.$font-size-14;
  }
}

@mixin l1 {
  font-family: vars.$font-rubik;
  font-size: vars.$font-size-18;
  line-height: vars.$line-height-md;
}

@mixin l2 {
  font-family: vars.$font-rubik;
  font-size: vars.$font-size-14;
  line-height: vars.$line-height-md;
  text-transform: uppercase;
}