faridv/hop

// Slick icon entity codes outputs the following
// '\2190' outputs ascii character '←'
// '\2192' outputs ascii character '→'
// '\2022' outputs ascii character '•'
$slick-loader-path: './' !default;
$slick-arrow-color: $gray-800 !default;
$slick-dot-color: $gray-800 !default;
$slick-dot-color-active: $slick-dot-color !default;
$slick-prev-character: '\e801' !default;
$slick-next-character: '\e802' !default;
$slick-dot-character: '\2022' !default;
$slick-dot-size: 6px !default;
$slick-opacity-default: 0.75 !default;
$slick-opacity-on-hover: 1 !default;
$slick-opacity-not-active: 0.25 !default;

/* Slider */
.slick-slider {
    position: relative; display: block; box-sizing: border-box; user-select: none; touch-action: pan-y; -webkit-tap-highlight-color: transparent;
    & .slick-track, & .slick-list { transform: translate3d(0, 0, 0); }
}
.slick-list {
    position: relative; display: block; margin: 0; padding: 0;
    //overflow: hidden;
    &:focus { outline: none; }
    &.dragging { cursor: pointer; cursor: hand; }
    .slick-loading & { background: url('assets/img/ajax-loader.gif') center center no-repeat #fff; }
}
.slick-track {
    position: relative; top: 0; left: 0; display: block;
    &:before, &:after { display: table; content: ''; }
    &:after { clear: both; }
}
.slick-loading .slick-track { visibility: hidden; }
.slick-slide {
    display: none; float: left; height: 100%; min-height: 1px;
    [dir='rtl'] & { float: right; }
    img { display: block; }
    &.slick-loading img { display: none; }
    &.dragging img { pointer-events: none; }
    .slick-initialized & { display: block; }
    .slick-loading & { visibility: hidden; }
    .slick-vertical & { display: block; height: auto; border: 1px solid transparent; }
}
.slick-arrow {
    font-family: $font-family-icons;
    .slick-hidden { display: none; }
}


/* Arrows */
.slick-prev, .slick-next {
    position: absolute; display: block; height: 20px; width: 20px; line-height: 0px; font-size: 0px; cursor: pointer;
    background: transparent; color: transparent; top: 50%; transform: translate(0, -50%); padding: 0; border: none; outline: none;
    &:hover, &:focus {
        outline: none; background: transparent; color: transparent;
        &:before { opacity: $slick-opacity-on-hover; }
    }
    &.slick-disabled:before { opacity: $slick-opacity-not-active; }
    &:before {
        /*font-family: $slick-font-family;*/
        font-size: 20px; line-height: 1; color: $slick-arrow-color; opacity: $slick-opacity-default;
    }
}

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

/* Dots */
.slick-dotted.slick-slider { margin-bottom: 30px; }
.slick-dots {
    position: absolute; bottom: -25px; list-style: none; display: block; text-align: center; padding: 0; margin: 0; width: 100%;
    li {
        position: relative; display: inline-block; height: 20px; width: 20px; margin: 0 5px; padding: 0; cursor: pointer;
        button {
            border: 0; background: transparent; display: block; height: 20px; width: 20px;
            outline: none; line-height: 0px; font-size: 0px; color: transparent; padding: 5px; cursor: pointer;
            &:hover, &:focus {
                outline: none;
                &:before { opacity: $slick-opacity-on-hover; }
            }
            &:before {
                /*font-family: $slick-font-family;*/
                position: absolute; top: 0; left: 0; content: $slick-dot-character; width: 20px; height: 20px;
                font-size: $slick-dot-size; line-height: 20px; text-align: center; color: $slick-dot-color; opacity: $slick-opacity-not-active;
            }
        }
        &.slick-active button:before { color: $slick-dot-color-active; opacity: $slick-opacity-default; }
    }
}