// mixins

@mixin sd-viewport($device) {
    @if $device == mobile {
        @media screen and (max-width: $sd-mobile-max - 1) {
            @content;
        }
    } @else if $device == tablet {
        @media screen and (min-width: $sd-mobile-max) and (max-width: $sd-tablet-max) {
            @content;
        }
    } @else if $device == desktop {
        @media screen and (min-width: $sd-tablet-max + 1) {
            @content;
        }
    } @else if $device == tablet-plus {
        @media screen and (min-width: $sd-mobile-max) {
            @content;
        }
    } @else if $device == mobile-tablet {
        @media screen and (max-width: $sd-tablet-max) {
            @content;
        }
    }
}

// hide content visually, but keep it accessible to screen readers
@mixin visually-hidden {
    position: absolute;
    border: 0;
    padding: 0;
    margin: -1px;
    height: 1px;
    width: 1px;
    clip: rect(1px 1px 1px 1px); /* for Internet Explorer */
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    overflow: hidden;
}

// Type
@mixin sd-font-family {
    font-family: $sd-atkinson-font;
}

@mixin sd-type-heading {
    @include sd-font-family;
    font-weight: $sd-font-weight-bold;
    color: $gray8;
    @include sd-viewport($sd-mobile) {
        font-size: 32px;
    }
    @include sd-viewport($sd-tablet) {
        font-size: 48px;
    }
    @include sd-viewport($sd-desktop) {
        font-size: 52px;
    }
}

@mixin sd-type-title {
    @include sd-font-family;
    color: $gray8;
    font-weight: $sd-font-weight-bold;
    @include sd-viewport($sd-mobile) {
        font-size: 26px;
    }
    @include sd-viewport($sd-tablet-plus) {
        font-size: 32px;
    }
}

@mixin sd-type-subtitle {
    @include sd-font-family;
    font-size: 24px;
    font-weight: $sd-font-weight-bold;
    color: $gray8;
}

@mixin sd-type-sectitle {
    @include sd-font-family;
    font-size: 20px;
    font-weight: $sd-font-weight-bold;
    color: $gray8;
}

@mixin sd-type-body {
    @include sd-font-family;
    color: $gray7;
    font-weight: $sd-font-weight-regular;
    font-size: 16px;
    line-height: 1.4em;
}

@mixin sd-type-caption {
    @include sd-font-family;
    font-weight: $sd-font-weight-regular;
    font-size: 14px;
    color: $gray8;
}

@mixin sd-type-nav {
    @include sd-font-family;
    font-weight: $sd-font-weight-bold;
    font-size: 16px;
}

@mixin sd-type-nav-sub {
    @include sd-type-nav;
    font-size: 14px;
    font-weight: $sd-font-weight-regular;
}

@mixin sd-type-current {
    @include sd-font-family;
    color: $gray7;
    font-weight: $sd-font-weight-bold;
    font-size: 16px;
}

// Flexbox alignment
@mixin flex-spaced-centered {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

@mixin flex-spaced-start {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}