@import "../../plugins/slick/slick.css";
@import "../../plugins/slick/slick-theme.css";

.slick-dotted.slick-slider {
    margin: 0;
}
.slick-dots {
    bottom: 0;
}
.slick-dots li {
    margin: 0 0.5rem;
}
.slick-dots li::before {
    display: none;
}
.slick-dots li button {
    padding: 0;
    width: 1rem;
    height: 1rem;
}
.slick-dots li button:before {
    opacity: 1;
    background: transparent;
    content: '';
    border: 2px solid var(--color-primary);
}
.slick-dots li.slick-active button:before {
    opacity: 1;
    background: var(--text-primary);
}
.slick-dots li, .slick-dots li button:before {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    transition: all 300ms;
}
/* .slick-dots li.slick-active,
.slick-dots li.slick-active button,
.slick-dots li.slick-active button:before {
    width: 19.33px;
} */


.slick-prev, .slick-next {
    vertical-align: middle;
    width: 2.25rem;
    height: 2.25rem;
    z-index: 1;
    transition: all 300ms ease-out;
}
.slick-prev {
    left: calc(-2.25rem - 0.625rem);
}
.slick-next {
    right: calc(-2.25rem - 0.625rem);
}
.slick-prev:before, .slick-next:before {
    content: '';
    font-family: inherit;
    display: block;
    width: 100%;
    height: 100%;
    opacity: 1;
    background: url('data:image/svg+xml;charset=utf-8,<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.5 27L22.5 18L13.5 9" stroke="%239B7C5F" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center;
}
.slick-prev:before {
    transform: rotate(180deg);
}
.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus {
    /* background: var(--color-secondary); */
}
.slick-prev:focus-visible, .slick-next:focus-visible {
    outline: 2px solid var(--color-primary) !important;
}

.slick-disabled {
    opacity: 0.2;
}
.slick-prev.slick-disabled:before, .slick-next.slick-disabled:before {
    opacity: 1;
}

/* Responsive */
@media only screen and (max-width: 1399px) {
    .slick-prev {
        left: -2.25rem;
    }
    .slick-next {
        right: -2.25rem;
    }
}

@media only screen and (max-width: 1199px) {
    .slick-prev {
        left: calc(-2.25rem / 2);
    }
    .slick-next {
        right: calc(-2.25rem / 2);
    }
}

@media only screen and (max-width: 991px) {
    .slick-slider {
        padding-top: calc(2.4rem + 0.387rem);
    }
    .slick-prev, .slick-next {
        top: 0;
        transform: inherit;
        width: 2.4rem;
        height: 2.4rem;
    }
    .slick-prev {
        left: 0;
    }
    .slick-next {
        right: 0;
    }
}