// Helpers

@mixin sd-viewport($device) {
    @if $device == mobile {
        @media screen and (max-width: $sd-mobile-max) {
            @content;
        }
    } @else if $device == tablet {
        @media screen and (min-width: $sd-mobile-max + 1) 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 + 1) {
            @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;
}

// 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;
}