@import "bootstrap/scss/mixins";
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";

.slick-carousel-wrapper {
    position: relative;
    width: 100%;
    padding: 0 25px;

    .slick-slider {
        margin: 0 -15px;
        position: relative;

        display: block;
        box-sizing: border-box;

        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;

        -webkit-touch-callout: none;
        -khtml-user-select: none;
        -ms-touch-action: pan-y;
        touch-action: pan-y;
        -webkit-tap-highlight-color: transparent;

        .slick-track,
        .slick-list {
            -webkit-transform: translate3d(0, 0, 0);
            -moz-transform: translate3d(0, 0, 0);
            -ms-transform: translate3d(0, 0, 0);
            -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }
    }

    .slick-list {
        position: relative;

        display: block;
        overflow: hidden;

        margin: 0;
        padding: 0;
    }
    .slick-list:focus {
        outline: none;
    }
    .slick-list.dragging {
        cursor: pointer;
        cursor: hand;
    }

    .slick-track {
        position: relative;
        top: 0;
        left: 0;

        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    .slick-track::before,
    .slick-track::after {
        display: table;

        content: "";
    }
    .slick-track::after {
        clear: both;
    }

    .slick-loading {
        .slick-track,
        .slick-slide {
            visibility: hidden;
        }
        .slick-list {
            /* todo add spinner? */
            overflow: hidden;
        }
    }

    .slick-slide {
        display: none;
        float: left;

        height: 100%;
        min-height: 1px;

        img {
            display: block;
        }
        .slick-loading img {
            display: none;
        }
        .dragging img {
            pointer-events: none;
        }
    }
    .slick-initialized .slick-slide {
        display: block;
    }
    .slick-vertical .slick-slide {
        display: block;
        height: auto;
        border: 1px solid transparent;
    }
    .slick-arrow {
        font-size: 0;
        line-height: 0;
        position: absolute;
        top: 45%;
        display: block;
        width: 32px;
        height: 32px;
        padding: 0;
        -webkit-transform: translate(0, -50%);
        -ms-transform: translate(0, -50%);
        transform: translate(0, -50%);
        cursor: pointer;
        color: transparent;
        z-index: 1;
        border: none;
        outline: 0;
        background-color: var(--bs-primary);
        border-radius: 50%;
        opacity: 0.65;

        &.slick-prev,
        &.slick-next {
            &:hover,
            &:focus {
                outline: 0;
                opacity: 1;
            }
        }
        &.slick-disabled {
            opacity: 0.25;
        }
        &.slick-hidden {
            display: none;
        }
        &.slick-prev {
            left: -10px;
            &::before {
                content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 100 100'%3E%3Cpolyline points='60,20 40,50 60,80' stroke='rgb(255,255,255)' stroke-width='5' fill='none'/%3E%3C/svg%3E");
            }
        }
        &.slick-next {
            right: -10px;
            &::before {
                content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 100 100'%3E%3Cpolyline points='40,20 60,50 40,80' stroke='rgb(255,255,255)' stroke-width='5' fill='none'/%3E%3C/svg%3E");
            }
        }
    }

    .slick-dotted.slick-slider {
        margin-bottom: 30px;
    }

    .slick-dots {
        position: absolute;
        bottom: -25px;
        display: block;
        width: 100%;
        padding: 0;
        margin: 0;
        list-style: none;
        text-align: center;

        li {
            position: relative;
            display: inline-block;
            width: 20px;
            height: 20px;
            margin: 0 5px;
            padding: 0;
            cursor: pointer;
            button {
                font-size: 0;
                line-height: 0;
                display: block;
                width: 20px;
                height: 20px;
                padding: 5px;
                cursor: pointer;
                color: transparent;
                border: 0;
                outline: 0;
                background: 0 0;
                &::before {
                    font-family: slick;
                    font-size: 20px;
                    line-height: 20px;
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 20px;
                    height: 20px;
                    content: "•";
                    text-align: center;
                    opacity: 0.25;
                    color: #000;
                    -webkit-font-smoothing: antialiased;
                    -moz-osx-font-smoothing: grayscale;
                }
                &:focus,
                &:hover {
                    outline: 0;
                    &::before,
                    &::before {
                        opacity: 1;
                    }
                }
            }
            &.slick-active {
                button:before {
                    opacity: 0.75;
                    color: #000;
                }
            }
        }
    }

    .slick-slide-item {
        padding: 0 15px;
    }
}

/** TOPICS CAROUSEL SPECIFICS */
.topics-carousel-wrapper {
    //   overflow: hidden;
    width: 80vw;
    @include media-breakpoint-up(xl) {
        width: 992px;
    }
    .slick-arrow {
        width: 48px;
        height: 48px;
        background-color: transparent;
        &.slick-prev {
            left: -25px;
            @include media-breakpoint-up(lg) {
                left: -50px;
            }
            &::before {
                content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 100 100'%3E%3Cpolyline points='60,20 40,50 60,80' stroke='rgb(255,255,255)' stroke-width='5' fill='none'/%3E%3C/svg%3E");
            }
        }

        &.slick-next {
            right: -25px;
            @include media-breakpoint-up(lg) {
                right: -50px;
            }
            &::before {
                content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 100 100'%3E%3Cpolyline points='40,20 60,50 40,80' stroke='rgb(255,255,255)' stroke-width='5' fill='none'/%3E%3C/svg%3E");
            }
        }
    }
    .topics-carousel:not(.slick-initialized) {
        display: flex;
        overflow: hidden;
        justify-content: center;
    }
    .topic-item {
        position: relative;
        text-align: center;
        .topic-icon {
            width: 65px;
            height: 65px;
            margin: 0 auto;
            padding: 10px;
            border: 2px solid white;
            // background color gradient from D9D9D9 to FFFFF 45 degrees
            background: linear-gradient(45deg, #ffffff, #d9d9d9);
            border-radius: 50%;
            // add drop down shadow bottom left
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            img {
                width: 100%;
                height: 100%;
                object-fit: contain;
            }
        }

        .topic-name {
            display: block;
            padding-top: 10px;
            color: white;
            text-transform: uppercase;
            font-size: 0.8rem;
            text-decoration: none;
        }
        &:hover {
            .topic-icon {
                background: linear-gradient(45deg, #d9d9d9, #ffffff);
                box-shadow: none;
                transform: translate(-1px, 1px);
            }
            // .topic-name {
            //   color: var(--bs-info);
            // }
        }
    }
}