@property --mask-left-start {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

@property --mask-left-end {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 25%;
}

@property --mask-right-start {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 75%;
}

@property --mask-right-end {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

.sponsor-slider-wrapper {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    max-width: 900px;
    /* gap: 15px; */

    &:has(.slider-prev:disabled) .sponsor-slider {
		--mask-left-end: 0%;
    }


    &:has(.slider-next:disabled) .sponsor-slider {
		--mask-right-start: 100%;
    }

    .wp-block-cjga-tools-slider-controls {
        display: contents;
		font-size: inherit;
		color: inherit;

        .slider-prev,
		.slider-next {
			grid-row: 1;
			background-color: inherit;
			border: none;
			cursor: pointer;
			color: inherit;
			font-size: inherit;
			display: inline-flex;
			align-items: center;
			justify-content: center;

			svg {
				width: 1.5em;
				height: 1.5em;
				stroke: currentColor;
			}

			&:hover {
				opacity: 0.85;
			}
		}
		
        .slider-prev {
            grid-column: 1;
        }

        .slider-next {
            grid-column: 3;
        }

        .slider-prev:disabled,
        .slider-next:disabled {
            opacity: 0.3;
            cursor: not-allowed;
            pointer-events: none;
        }
    }

    .wp-block-cjga-tools-card-popover {
        position: absolute;
		position-anchor: --slider;
		position-area: bottom center;
        box-sizing: border-box;
        transition: opacity 0.3s ease, transform 0.3s ease;
        transform: translateY(0);
        opacity: 0;
		
        &[style*="display: block"],
        &:popover-open {
            opacity: 1;
            transform: translateY(10px);
        }
    }

    > .sponsor-slider {
		--mask-left-start: 0%;
		--mask-left-end: 25%;
		--mask-right-start: 75%;
		--mask-right-end: 100%;

		grid-row: 1;
		grid-column: 2;
        width: 100%;
        display: flex;
        gap: 20px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        padding-bottom: 10px;
		mask-image: linear-gradient(to right, transparent var(--mask-left-start), black var(--mask-left-end), black var(--mask-right-start), transparent var(--mask-right-end));
		min-width: 100%;
		justify-content: flex-start;
		anchor-name: --slider;

		transition:
			--mask-left-start 300ms ease,
			--mask-left-end 300ms ease,
			--mask-right-start 300ms ease,
			--mask-right-end 300ms ease;

	    /* Hide Scrollbar */
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE/Edge */
        &::-webkit-scrollbar {
	    /* Chrome, Safari, Opera */
            display: none;
        }

        > .sponsor-card {
            flex: 0 0 clamp(50px, 80vw, 100px);
            scroll-snap-align: start;
            box-sizing: border-box;
            position: relative;
        }
    }
}

@media (max-width: 480px) {
    .sponsor-slider-wrapper {
        grid-template-columns: 1fr;
        
        > .sponsor-slider {
            grid-column: 1;
        }
        
        .wp-block-buttons {
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
        }
    }
}