@mixin myriad($weight: 300, $size: $body-font-size) {
    font-family: 'myriad-pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: $weight;
    font-size: $size;
}

@mixin custom-grid($breakpoint, $divider, $margin) {
    @if $breakpoint == 'xs' {
        width: calc(100% / #{$divider} - (2 * #{$margin})) !important;
        margin: #{$margin};
    } @else {
        @include media-breakpoint-up($breakpoint) {
            width: calc(100% / #{$divider} - (2 * #{$margin})) !important;
            margin: #{$margin};
        }
    }
}

@mixin border-position($position, $bordered: true) {
    @if $bordered {
        @if $position == 'top' {
            border-top: $border !important;
        } @else if $position == 'right' {
            border-right: $border !important;
        } @else if $position == 'bottom' {
            border-bottom: $border !important;
        } @else if $position == 'left' {
            border-left: $border !important;
        } @else if $position == 'x' {
            border-left: $border !important;
            border-right: $border !important;
        } @else if $position == 'y' {
            border-top: $border !important;
            border-bottom: $border !important;
        } @else {
            border: $border !important;
        }
    } @else {
        @if $position == 'top' {
            border-top: none !important;
        } @else if $position == 'right' {
            border-right: none !important;
        } @else if $position == 'bottom' {
            border-bottom: none !important;
        } @else if $position == 'left' {
            border-left: none !important;
        } @else if $position == 'x' {
            border-left: none !important;
            border-right: none !important;
        } @else if $position == 'y' {
            border-top: none !important;
            border-bottom: none !important;
        } @else {
            border: none !important;
        }
    }
}

@mixin border($breakpoint, $bordered: true, $position: '') {
    @if $breakpoint == 'sm' and $bordered {
        @include media-breakpoint-up($breakpoint) {
            @include border-position($position, true);
        }
    } @else if $breakpoint == 'sm' and not $bordered {
        @include media-breakpoint-up($breakpoint) {
            @include border-position($position, false);
        }
    } @else {
        @if $bordered {
            @include border-position($position, true);
        } @else {
            @include border-position($position, true);
        }
    }
}

@mixin card-background-img {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin: 10px;
}

@mixin round-pseudo-bg($color: '#fff', $shape: '') {
    &:before {
        content: '';
        position: absolute;
        height: 90%;
        width: 90%;
        top: 10%;
        right: 30%;
        background-color: $color;

        @if $shape == 'round' {
            border-radius: 100%;
        } @else {
            border-radius: 0;
        }
    }
}

@mixin bg-color($color, $breakpoint) {
    @if $breakpoint == 'sm' {
        @include media-breakpoint-up($breakpoint) {
            background-color: $color;
        }
    } @else {
        background-color: $color;
    }
}

@mixin absolute-position($top, $right, $bottom, $left, $trans) {
    position: absolute;
    top: $top;
    right: $right;
    bottom: $bottom;
    left: $left;
    transform: $trans;
}

@mixin reset-absolute() {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    bottom: auto;
    transform: none;
}

@mixin text-column($breakpoint, $col, $gap) {
    list-style-type: none;
    padding: 0;

    @if $breakpoint == 'sm' {
        @include media-breakpoint-up($breakpoint) {
            column-count: $col;
            column-gap: $gap;
        }
    } @else if $breakpoint == 'md' {
        @include media-breakpoint-up($breakpoint) {
            column-count: $col;
            column-gap: $gap;
        }
    } @else if $breakpoint == 'lg' {
        @include media-breakpoint-up($breakpoint) {
            column-count: $col;
            column-gap: $gap;
        }
    } @else {
        column-count: $col;
        column-gap: $gap;
    }
}

@mixin hover-opacity-fadeOut() {
    transition: all 0.5s ease;
    cursor: pointer;

    &:hover {
        opacity: 0.7;
    }
}

@mixin hover-opacity-fadeIn() {
    transition: all 0.5s ease;
    cursor: pointer;

    &:hover {
        opacity: 1;
    }
}

@mixin close-button() {
    background-image: url('../../public/images/icons/close.svg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 10px;
    height: 10px;
    z-index: 2;
    @include hover-opacity-fadeOut();
}

@mixin margin-position($position, $num) {
    @if $position == 't' {
        margin-top: ($spacer * $num) !important;
    } @else if $position == 'r' {
        margin-right: ($spacer * $num) !important;
    } @else if $position == 'b' {
        margin-bottom: ($spacer * $num) !important;
    } @else if $position == 'l' {
        margin-left: ($spacer * $num) !important;
    } @else if $position == 'x' {
        margin-left: ($spacer * $num) !important;
        margin-right: ($spacer * $num) !important;
    } @else if $position == 'y' {
        margin-top: ($spacer * $num) !important;
        margin-bottom: ($spacer * $num) !important;
    } @else {
        margin: ($spacer * $num) !important;
    }
}

@mixin custom-margin($num, $position, $breakpoint) {
    @if $breakpoint == 'sm' {
        @include media-breakpoint-up($breakpoint) {
            @include margin-position($position, $num);
        }
    } @else if $breakpoint == 'md' {
        @include media-breakpoint-up($breakpoint) {
            @include margin-position($position, $num);
        }
    } @else if $breakpoint == 'lg' {
        @include media-breakpoint-up($breakpoint) {
            @include margin-position($position, $num);
        }
    } @else {
        @include margin-position($position, $num);
    }
}

@mixin padding-position($position, $num) {
    @if $position == 't' {
        padding-top: ($spacer * $num) !important;
    } @else if $position == 'r' {
        padding-right: ($spacer * $num) !important;
    } @else if $position == 'b' {
        padding-bottom: ($spacer * $num) !important;
    } @else if $position == 'l' {
        padding-left: ($spacer * $num) !important;
    } @else if $position == 'x' {
        padding-left: ($spacer * $num) !important;
        padding-right: ($spacer * $num) !important;
    } @else if $position == 'y' {
        padding-top: ($spacer * $num) !important;
        padding-bottom: ($spacer * $num) !important;
    } @else {
        padding: ($spacer * $num) !important;
    }
}

@mixin custom-padding($num, $position, $breakpoint) {
    @if $breakpoint == 'sm' {
        @include media-breakpoint-up($breakpoint) {
            @include padding-position($position, $num);
        }
    } @else if $breakpoint == 'md' {
        @include media-breakpoint-up($breakpoint) {
            @include margin-position($position, $num);
        }
    } @else if $breakpoint == 'lg' {
        @include media-breakpoint-up($breakpoint) {
            @include margin-position($position, $num);
        }
    } @else {
        @include padding-position($position, $num);
    }
}

@mixin text-overflow($style) {
    text-overflow: $style;
    white-space: nowrap;
    overflow: hidden;
}
