@import './mixins';
@import './variables';
@import 'true';

@include describe('gl-fluid-font-size') {
  @include it('returns fluid font-size') {
    @include assert {
      @include output {
        @include gl-fluid-font-size(2rem, 3.5rem);
      }
      @include expect {
        @media (min-width: 768px) {
          // prettier-ignore
          font-size: calc( 2rem + 1.5 * ((100vw - 768px) / 27));
        }

        @media (min-width: 1200px) {
          font-size: 3.5rem;
        }
      }
    }
  }
}

@include describe('gl-fluid-line-height') {
  @include it('returns fluid line-height') {
    @include assert {
      @include output {
        @include gl-fluid-line-height(2rem, 3.5rem);
      }
      @include expect {
        @media (min-width: 768px) {
          // prettier-ignore
          line-height: calc( 2rem + 1.5 * ((100vw - 768px) / 27));
        }

        @media (min-width: 1200px) {
          line-height: 3.5rem;
        }
      }
    }
  }
}

@include describe('gl-media-breakpoint-up') {
  @include it('returns no media query for xs') {
    @include assert {
      @include output {
        @include gl-media-breakpoint-up(xs) {
          color: $green-100;
        }
      }
      @include expect {
        color: $green-100;
      }
    }
  }
  @include it('returns min-width media query for sm') {
    @include assert {
      @include output {
        @include gl-media-breakpoint-up(sm) {
          color: $blue-100;
        }
      }
      @include expect {
        @media (min-width: '576px') {
          color: $blue-100;
        }
      }
    }
  }
}

@include describe('gl-media-breakpoint-down') {
  @include it('returns max-width media query for lg') {
    @include assert {
      @include output {
        @include gl-media-breakpoint-down(lg) {
          color: $red-100;
        }
      }
      @include expect {
        @media (max-width: '991.98px') {
          color: $red-100;
        }
      }
    }
  }
  @include it('returns max-width media query for md') {
    @include assert {
      @include output {
        @include gl-media-breakpoint-down(md) {
          color: $orange-100;
        }
      }
      @include expect {
        @media (max-width: '767.98px') {
          color: $orange-100;
        }
      }
    }
  }
}