///////////////////////
// BASE TEXT
////
// General text styling
// 
html 
    font-size: 6.25%
    // 1 to 1 px to rem
body 
    font-size: 18rem

@mixin get-text($size)
    line-height: 1.5em
    @if $size == x-large
        font-size: 30rem
    @else if $size == large
        font-size: 20rem
    @else if $size == regular
        font-size: 18rem
    @else if $size == small
        font-size: 16rem
    @else if $size == x-small
        font-size: 14rem
    @else if $size == xx-small
        font-size: 12rem


    @else if $size == h1
        font-size: 56rem
    @else if $size == h1-desktop
    @else if $size == h1-mobile

    @else if $size == h2
        font-size: 60rem
    @else if $size == h2-desktop
    @else if $size == h2-mobile

    @else if $size == h3
        font-size: 40rem
    @else if $size == h3-desktop
    @else if $size == h3-mobile




h1, .text--h1-sized
    font-weight: 600
    @include get-text(h1)

h2, .text--h2-sized
    font-weight: 600
    @include get-text(h2)
    margin-bottom: 24px
    margin-top: 24px

h3, .text--h3-sized
    font-weight: 600
    @include get-text(h3)
    margin-bottom: 40px
    margin-top: 24px


.text--x-large
    font-weight: 400
    @include get-text(x-large)

.text--large
    font-weight: 400
    @include get-text(large)

.text--regular
    font-weight: 400
    @include get-text(regular)

.text--regular-small
    font-weight: 400
    @include get-text(regular-small)

.text--small
    font-weight: 400
    @include get-text(small)

.text--x-small
    font-weight: 400
    @include get-text(x-small)


.text--bold-weight
    font-weight: 700
.text--semibold-weight
    font-weight: 600
.text--medium-weight
    font-weight: 500


/***********/
/** MEDIA **/
/***********/
@mixin base-text--desktop-and-smaller
    .text--x-large
        @include get-text(large)
    .text--large
        @include get-text(regular)
    .text--regular
        @include get-text(small)
    .text--regular-small
        @include get-text(small)
    .text--small
        @include get-text(x-small)
    .text--x-small
        @include get-text(xx-small)

    h1, .text--h1-sized
        // @include get-text(h2-large)
    h2, .text--h2-sized
        // @include get-text(h2-small)
    h3, .text--h3-sized
        @include get-text(x-large)

@mixin base-text--tablet-and-smaller
    .text--x-large
        @include get-text(regular)
    .text--large
        @include get-text(small)
    .text--regular
        @include get-text(x-small)
    .text--regular-small
        @include get-text(x-small)
    .text--small
        @include get-text(xx-small)
    .text--x-small
        @include get-text(xxx-small)
    h1, .text--h1-sized
        @include get-text(h2)
    h2, .text--h2-sized
        @include get-text(h3)
    h3, .text--h3-sized
        @include get-text(large)



@mixin base-text--mobile-and-smaller
    // h1, .text--h1-sized, .text--h1-large-sized
    //     @include get-text(xx-large)