/*
 * Citizen - SRF Gallery Carousel
 * https://starcitizen.tools
*/

@import '../../../../resources/variables.less';

.skin-citizen-dark {
	.jcarousel-skin-smw .jcarousel-container {
		background: var( --color-surface-0 );
	}

	.jcarousel-skin-smw .jcarousel-container-horizontal {
		border: 1px solid @dark-bg-20;
	}

	.jcarousel-skin-smw .jcarousel-container-vertical {
		border: 1px solid @dark-bg-20;
	}

	.jcarousel-skin-smw .jcarousel-item-placeholder {
		color: var( --color-base--emphasized );
		background: var( --color-surface-0 );
	}

	.jcarousel-skin-smw .jcarousel-next-horizontal,
	.jcarousel-skin-smw .jcarousel-prev-horizontal {
		color: var( --color-base--subtle );
		background-color: @dark-bg-10;
		border: 1px solid @dark-bg-20;
	}

	.jcarousel-skin-smw .jcarousel-next-horizontal:hover,
	.jcarousel-skin-smw .jcarousel-prev-horizontal:hover {
		color: var( --color-base--subtle );
		background-color: @dark-bg-20;
		border-color: @dark-bg-30;
		box-shadow: inset 0 0 1px rgba( 0, 0, 0, 0.1 );
	}

	.jcarousel-skin-smw .jcarousel-next-vertical,
	.jcarousel-skin-smw .jcarousel-prev-vertical {
		color: var( --color-base--subtle );
		background-color: @dark-bg-10;
		border: 1px solid @dark-bg-20;
	}

	.jcarousel-skin-smw .jcarousel-next-vertical:hover,
	.jcarousel-skin-smw .jcarousel-prev-vertical:hover {
		color: var( --color-base );
		background-color: @dark-bg-20;
		border-color: @dark-bg-30;
		box-shadow: inset 0 0 1px rgba( 0, 0, 0, 0.1 );
	}
}