@use 'sass:meta';
@use 'settings' as *;
@use 'mixins' as *;

// Default Variables

$swiper-font-path: '../fonts/' !default;
$swiper-font-family: 'fontawesome' !default;
$swiper-loader-path: '../img/' !default;
$swiper-arrow-color: $color_4 !default;
$swiper-dot-color: black !default;
$swiper-dot-color-active: $color_3 !default;
$swiper-prev-character: '\f104' !default;
$swiper-next-character: '\f105' !default;
$swiper-dot-character: '\f111' !default;
$swiper-dot-size: 10px !default;
$swiper-opacity-default: 0.75 !default;
$swiper-opacity-on-hover: 1 !default;
$swiper-opacity-not-active: 0.25 !default;

@function swiper-image-url($url) {
    @if meta.function-exists('image-url') {
        @return image-url($url);
    }
    @else {
        @return url($swiper-loader-path + $url);
    }
}

@function swiper-font-url($url) {
    @if meta.function-exists('font-url') {
        @return font-url($url);
    }
    @else {
        @return url($swiper-font-path + $url);
    }
}

/* Clients slider */

#clients, #clients-rtl {
    .swiper-container {
        width: 96%;
        margin: 0 2%;
    }
}

.swiper-container {
    .swiper-loading & {
        background: #fff swiper-image-url('loading.gif') center center no-repeat;
    }
    .swiper-slide {
        padding: 0 2px;
        img {
            width: 100%;
        }
    }
}

.swiper-button-next:after, .swiper-button-prev:after {
    display: none;
}

.home-carousel {
    margin-left: -15px;
    margin-right: -15px;
    .swiper-slide {
        padding: 0 15px;
    }
}

/* Icons */
@if $swiper-font-family == "FontAwesome" {
    @font-face {
        font-family: 'FontAwesome';
        src: url('../fontawesome/webfonts/fa-brands-400.ttf') format('truetype'), url('../fontawesome/webfonts/fa-brands-400.woff2') format('woff2'), url('../fontawesome/webfonts/fa-regular-400.ttf') format('truetype'), url('../fontawesome/webfonts/fa-regular-400.woff2') format('woff2'), url('../fontawesome/svgs/brands/font-awesome.svg') format('svg');
        font-weight: normal;
        font-style: normal;
    }
}

/* Arrows */

.swiper-button-prev,
.swiper-button-next {
    position: absolute;
    display: block;
    height: 30px;
    width: 30px;
    line-height: 0px;
    font-size: 0px;
    cursor: pointer;
    background: transparent;
    color: transparent;
    margin-top: -10px\9; /*lte IE 8*/
    padding: 0;
    border: none;
    outline: none;
    &:hover, &:focus {
        outline: none;
        background: transparent;
        color: transparent;
        &:before {
            opacity: $swiper-opacity-on-hover;
        }
    }
    &.swiper-disabled:before {
        opacity: $swiper-opacity-not-active;
    }
}

.swiper-button-prev:before, .swiper-button-next:before {
    font-family: $swiper-font-family;
    font-size: 30px;
    line-height: 1;
    color: $swiper-arrow-color;
    opacity: $swiper-opacity-default;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.main-slider-button-next {
    &.swiper-button-next {
        margin-right: 15px;
        &:before {
            color: rgba(255, 255, 255, 0.8);
            font-size: 45px;
            text-shadow:none;
        }
    }
}

.main-slider-button-prev {
    &.swiper-button-prev {
        margin-left: 15px;
        &:before {
            color: rgba(255, 255, 255, 0.8);
            font-size: 45px;
            text-shadow:none;
        }
    }
}

.swiper-button-prev {
    left: -5px;
    [dir="rtl"] & {
        left: auto;
        right: -5px;
    }
    &:before {
        content: $swiper-prev-character;
        [dir="rtl"] & {
            content: $swiper-next-character;
        }
    }
}

.swiper-button-next {
    right: -5px;
    [dir="rtl"] & {
        left: -5px;
        right: auto;
    }
    &:before {
        content: $swiper-next-character;
        [dir="rtl"] & {
            content: $swiper-prev-character;
        }
    }
}

/* Dots */

.swiper-slider {
    margin-bottom: 30px;
    position: relative;
}

.swiper {
    margin: 0;
}

.swiper-pagination, .products-pagination, .jobs-pagination, .swiper-pagination-bullets.swiper-pagination-horizontal {
    bottom: -45px;
    list-style: none;
    width: 98%;
    margin-left: 1%;
    text-align: center;
    padding: 0;
    margin-bottom: 1rem;
    span {
        border: 0;
        background: transparent;
        height: 20px;
        width: 20px;
        outline: none;
        line-height: 0px;
        font-size: 0px;
        color: transparent;
        margin: 0;
        padding: 5px;
        cursor: pointer;
        &:hover, &:focus {
            outline: none;
            &:before {
                @include opacity(0.5);
            }
        }
        &:before {
            top: 0;
            left: 0;
            content: $swiper-dot-character;
            width: 20px;
            height: 20px;
            font-family: $swiper-font-family;
            font-size: $swiper-dot-size;
            line-height: 20px;
            text-align: center;
            color: $swiper-dot-color;
            @include opacity(0.2);
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
    }
    .swiper-pagination-bullet-active::before {
        color: $swiper-dot-color-active;
        @include opacity(1);
    }
}
.products-pagination, .jobs-pagination {
    margin-top: 20px;
}
