/**********************************
    I M P O R T A N T E
    Modificar este archivo puede desarmar los slider del sitio
***********************************/

.grid-slider{
    --gap: var(--slider-margin);
    display:grid;
}
.grid-slider.slick-initialized{
    --default-area: 
        "left slick-list right"
        "dots dots dots";
    --gap:0;
    align-items:center;
    grid-template-columns:  minmax(0,auto) minmax(0,100%) minmax(0,auto);
    grid-template-areas:    var(--slick-initialized-area, var(--default-area));
    
}
.grid-slider.slick-initialized .slick-list{
    grid-area:slick-list;
  margin-left:calc(var(--slider-margin)/2 * -1);
    margin-right:calc(var(--slider-margin)/2 * -1);
}
.grid-slider.slick-initialized .slick-track{
    display:flex;
    transform: translate3d(0) !important;
}
.grid-slider.slick-initialized .slick-slide{
    height:auto;
    box-sizing:border-box;
}

.grid-slider.slick-initialized .slick-dots{
    grid-area:dots;
    justify-self:center;
}

/*************************************
ARROW
*************************************/
.grid-slider .slick-arrow{
    box-sizing:border-box;
    z-index:50;
    border-radius:var(--default-border-radius);
}
.grid-slider .slick-arrow > *{
     background:var(--slider-arrow-bg,transparent);
     color:var(--slider-arrow-color,var(--primary-color));
     width:2rem;
     height:2rem;
     border-radius: var(--slider-arrow-border-radius, var(--default-border-radius));
     display:flex;
     align-items:center;
     justify-content:center;
}
.grid-slider .slick-arrow:hover > *{
    background:var(--slider-arrow-hover-bg, var(--primary-color));
    color:var(--slider-arrow-hover-color, var(--primary-contrast));
}
.grid-slider .slick-prev{justify-self:start; padding-right:.25rem;}
.grid-slider .slick-next{justify-self:end;padding-left:.25rem;}

/*mobile first*/

.grid-slider.slick-initialized .item{
    padding: 0 calc(var(--slider-margin)/2);
}

/********************************************
DOTS deben estar en la configuracion del slider 
*********************************************/
.slick-dots{
    /* necesario para responsive */
    display:flex; 
    flex-wrap:wrap;
}
.slick-dots > li:only-child {
    display: none;
}
.slick-dots li button{
    padding: var(--slider-dots-margin, .5rem);
}
.slick-dots li button::before{
    /* estructura del boton*/
    content:" ";
    width:var(--slider-dots-width, .5rem);
    height:var(--slider-dots-height, .5rem);
    background:var(--slider-dots-bg, black);
    border:solid var(--slider-dots-border-size, 0px) var(--slider-dots-border-color, --slider-dots-bg) ;
    opacity: var(--slider-dots-op,.5);
    
}
.slick-dots li.slick-active button::before{
    /* cuando esta activo*/
    background:var(--slider-dots-bg-active, rgba(0,0,0,1));
    border:solid var(--slider-dots-border-size, 0px) var(--slider-dots-border-color-active, var(--slider-dots-bg-active)) ;
    opacity: var(--slider-dots-op-active, var(--slider-dots-op,1));
}
.slick-dots li:not(.slick-active):hover button::before{
    /* cuando esta activo*/
    background:var(--slider-dots-bg-hover, rgba(0,0,0,1));
    border:solid var(--slider-dots-border-size, 0px) var(--slider-dots-border-color-hover, var(--slider-dots-bg-hover)) ;
    opacity: var(--slider-dots-op-hover, var(--slider-dots-op,1));
}

/* slider over arrow, flechas arriba */ 
.grid-slider__arrow-over{
    overflow:hidden;
    grid-template-areas: "slick-list slick-list"
}

.grid-slider__arrow-over .slick-prev{
    grid-area: slick-list;
    justify-self:start;
}
.grid-slider__arrow-over .slick-next{
    grid-area: slick-list;
    justify-self:end;
}
.grid-slider__arrow-over .slick-disabled{
    opacity:0;
}
.grid-slider__arrow-over .slick-prev::before,
.grid-slider__arrow-over .slick-next::before{
    position:absolute;
    top:1rem;
    bottom:1rem;
    content:"";
    z-index:-1;
}
.grid-slider__arrow-over .slick-prev::before{
    box-shadow:0px 0px 15px 6px rgba(0,0,0,0.75);
}
.grid-slider__arrow-over .slick-next::before{
    box-shadow:0px 0px 15px 6px rgba(0,0,0,0.75);
    right:0;
    
}


.grid-slider__arrow-over .slick-track {
    margin-left: 0;
    margin-right: 0;
}

.grid-slider__arrow-over .slick-arrow > *{
     background:var(--slider-arrow-bg,white);
     color:var(--slider-arrow-color,var(--primary-color));
     width:2rem;
     height:4rem;
     font-size:1rem;
     border-radius:0;
     display:flex;
     align-items:center;
     justify-content:center;
}

@media screen and (min-width:768px){
    .grid-slider__arrow-over .slick-arrow > *{
        background:var(--slider-arrow-bg, rgba(0,0,0,0.25));
        color:var(--slider-arrow-color,white);
        width:3rem;
        height:5rem;
        font-size:1.5rem;
    }
}
.grid-slider__arrow-over .slick-arrow:hover > *{
    background:var(--slider-arrow-hover-bg, var(--primary-color));
    color:var(--slider-arrow-hover-color, var(--primary-contrast));
}