/*
	README

	This file should only be used to style structure of the widget. It should not
	contain fonts or theme styling. Use the shared_theme.css for that purpose.

	If simply theming the CCL, leave this file alone.

	If your design is very customized, edit this file as needed. 
*/
.core-v2-slider {
    display: flex;
    justify-content: center;
    overflow: hidden;

    .widget-inner {
        padding-block: var(--space-5);

        .title-col {
            width: calc(100% - 25px);
            padding-bottom: 15px;
        }
    }
}

.core-v2-slider .slider-cont {
	position: relative;
	width: calc(100% - 24px);
	max-width: calc(var(--width-base) - var(--space-10));
	margin: 0 auto;
}

.core-v2-slider .glide__track {
    overflow: unset;
}

.core-v2-slider .glide__arrows {
	position: absolute;
	top: 50%;
	right: 0;
	left: 0;
	z-index: 5;
	transform: translateY(-50%);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 32px;
	pointer-events: none;
}

.core-v2-slider .glide__arrow {
    margin: 0;
}

.core-v2-slider .slide {
	background: var(--white);
}

.core-v2-slider .content-section {
	gap: 15px;
	padding: 20px 20px;
}

/*----- full-width -----*/

.core-v2-slider.full-width .slider-cont {
	width: 100%;
	max-width: none;
	margin: 0;
}

.core-v2-slider.full-width .content-section {
	padding: var(--space-5) var(--space-4);
}

.core-v2-slider .arrows {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0 auto;
    padding: 16px 15px;
	border-bottom: 2px solid var(--sw-collections-widget-header-border-color);
}

/*===================================*/
/*=====----- MEDIA QUERIES -----=====*/
/*===================================*/

@container (min-width: 48em) {
    .core-v2-slider .widget-inner {
        --widget-title-size: var(--text-2xl);
        --slide-title-size: var(--text-sm);

        /* display: grid; */
        align-items: center;
        gap: var(--space-6);
        padding-left: var(--side-padding);

        .slider-cont {
            display: grid;
            grid-template-columns: 2fr 1fr;

            .glide__track {
                grid-row: 2;
                grid-column: 1 / span 2;
            }
        }
    }

    .core-v2-slider .widget-header {
        display: grid;
        width: 100%;
        padding: 0;
        margin: 0;
        border-bottom: none;
    }

    .core-v2-slider .widget-header .title-col,
    .core-v2-slider .view-all-col {
        width: 100%;
        max-width: none;
        margin: 0;
    }

    .core-v2-slider .view-all-col {
        margin-block: var(--space-3);
        display: flex;
        justify-content: flex-end;
        grid-column: 2;
    }
    
    .core-v2-slider .title-col {
        padding-bottom: 0;
        border-bottom: none;
    }

    .core-v2-slider .slider-cont {
        width: 100%;
        margin: 0;
    }

    .core-v2-slider .img-cont::before {
        inset: 0;
    }
    
    .core-v2-slider .content-section {
        padding: var(--space-3);
    }

    .core-v2-slider .details {
        font-size: var(--text-xs);
    }

    .core-v2-slider .mini-date-section {
        --month-size: var(--text-xs);
        --day-size: var(--text-xl);
    }
    
    /*----- header on right -----*/

    .core-v2-slider.header-on-right .widget-inner {
        grid-template: auto / minmax(0, 5fr) minmax(0, 2fr);
        padding: 0 var(--side-padding) 0 0;
    }

    .core-v2-slider.header-on-right .widget-header {
        order: 1;
        padding: 0;
    }

    .core-v2-slider .glide__track {
        overflow: hidden;
    }

    /*----- arrows in header -----*/

    .core-v2-slider .arrows {
        width: 100%;
        padding: 0;
        margin: 0;
        border-bottom: none;
        grid-column: 2;
    }

    /*----- arrows in slider -----*/

    .core-v2-slider .glide__arrows {
        left: calc(var(--space-10) * -1);
        grid-column: 2;
    }

    /*----- header on right, arrows in slider -----*/

    .core-v2-slider.header-on-right .glide__arrows {
        right: calc(var(--space-10) * -1);
        padding-left: var(--space-12);
    }

    .core-v2-slider .arrows {
        justify-content: flex-end !important;
        gap: 20px;
    }
}

@container (min-width: 64em) {
    .core-v2-slider .widget-inner {
        --side-padding: 30px;
        --widget-title-size: var(--text-4xl);
        --slide-title-size: var(--text-base);

        grid-template: auto / minmax(0, 1fr) minmax(0, 3fr);
        gap: var(--space-10);

        .glide__arrows {
            padding: 0 0 15px 0;
        }
    }

    .core-v2-slider .slider-cont {
        max-width: 1250px;
    }

    .core-v2-slider .slide .content-section {
        padding: var(--space-4);
    }

    .core-v2-slider .mini-date-section {
        --month-size: var(--text-sm);
        --day-size: var(--text-2xl);
    }

    /*----- header on right -----*/

    .core-v2-slider.header-on-right .widget-inner {
        grid-template: auto / minmax(0, 3fr) minmax(0, 1fr);
    }

    /*----- arrows in slider -----*/

    .core-v2-slider.full-width .glide__arrows,
    .core-v2-slider.full-width .view-all-col {
        left: calc(var(--space-5) * -1);
        padding: 0 108px 15px 0;
    }

    /*----- arrows in slider, header on right -----*/

    .core-v2-slider.header-on-right .glide__arrows {
        right: calc(var(--space-5) * -1);
        padding: 0 0 0 108px;
    }

    .core-v2-slider .arrows {
        margin-bottom: 28px;
    }
}

@container (min-width: 90em) {
    .core-v2-slider .widget-inner {
        --widget-title-size: var(--text-5xl);
        --slide-title-size: var(--text-xl);

        grid-template: auto / var(--width-compact) minmax(0, 1fr);
    }

    .core-v2-slider .shared-play-button {
        width: var(--space-16);
	    height: var(--space-16);
        font-size: var(--text-2xl);
    }

    .core-v2-slider .content-section {
        padding: var(--space-5) var(--space-6);
    }

    .core-v2-slider .details {
        font-size: var(--text-sm);
    }

    .core-v2-slider .mini-date-section {
        --month-size: var(--text-base);
        --day-size: var(--text-3xl);
    }
    
    /*----- header on right -----*/

    .core-v2-slider.header-on-right .widget-inner {
        grid-template: auto / minmax(0, 1fr) var(--width-compact);
    }
}

@container (min-width: 120em) {
    .core-v2-slider .widget-inner {
        --slide-title-size: var(--text-2xl);
    }
}