// Hide text
%hide-text {
    overflow: hidden;
    white-space: nowrap;
    text-indent: 200%;
}

// Clearfix
%clearfix {
    &:after {
        content: "";
        display: table;
        clear: both;
    }
}

// Get REM font-size and line-height
@mixin fs-lh ($fontSize, $lineHeight) {
    line-height: round(($fontSize / $lineHeight) * 1000) / 1000;
    font-size: rem($fontSize);
}

// Top-right-bottom-left
@mixin trbl ($value: 0) {
    top: $value; right: $value; bottom: $value; left: $value;
}

// Center vertically
@mixin center-y {
    top: 50%;
    transform: translate(0, -50%);
}

// Center horizontally
@mixin center-x {
    left: 50%;
    transform: translate(-50%, 0);
}

// Center vertically and horizontally
@mixin center-xy {
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}

// Smooth fonts
@mixin font-smooth {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

// Reponsive breakpoints
@mixin breakpoint ($size) {
    @if ($size == m) {
        @media (min-width: $screen-mob) { @content; }
    }
    @else if ($size == xs) {
        @media (max-width: $screen-xs) { @content; }
    }
    @else if ($size == sm) {
        @media (min-width: $screen-sm) { @content; }
    }
    @else if ($size == md) {
        @media (min-width: $screen-md) { @content; }
    }
    @else if ($size == lg) {
        @media (min-width: $screen-lg) { @content; }
    }
    @else if ($size == xl) {
        @media (min-width: $screen-xl) { @content; }
    }
    @else if ($size == xxl) {
        @media (min-width: $screen-xxl) { @content; }
    }
    @else {
        @media (min-width: $size) { @content; }
    }
}

// Font-face
@mixin font-face ($family) {
    @font-face {
        font-family: "#{$family}";
        font-style: normal;
        font-weight: normal;
        font-display: swap;
        src: local("#{$family}"),
             url("#{$dir-fonts}/#{$family}.woff2") format("woff2"),
             url("#{$dir-fonts}/#{$family}.woff") format("woff");
    }
}
