//
// Variables
//

// General
$carousel-class-prefix: $global-class-prefix !default;
$carousel-spacing-vertical: $global-spacing-vertical !default;
$carousel-padding: 1em !default;
$carousel-font-size: $global-font-size !default;
$carousel-color: inherit !default;
$carousel-border-width: $global-border-width !default;
$carousel-border-style : $global-border-style !default;
$carousel-border-color: $global-border-color !default;
$carousel-border-radius: 0 !default;
$carousel-background-color: transparent !default;
$carousel-box-shadow: none !default;

// Element specific
$carousel-dot-color: $global-primary-color !default;


//
// Exported selectors
//
.#{$global-class-prefix}ui {

	.#{$carousel-class-prefix}carousel {
		position: relative;
		margin-bottom: $carousel-spacing-vertical;
		font-size: $carousel-font-size;
		color: $carousel-color;
		background-color: $carousel-background-color;
		border: $carousel-border-width $carousel-border-style $carousel-border-color;
		border-radius: $carousel-border-radius;
		box-shadow: $carousel-box-shadow;

		&--slider {

			// @todo align position of dot navigation in canvas and frontend

			> .slick-dots,
			> .#{$carousel-class-prefix}carousel__wrap > .slick-dots {
				position: absolute;
				bottom: 0;
				border-top-width: 0;
			}
		}

		&:not( [data-slides="1"] ) {

			// Ensure that Flexbox is not automatically applied to child carousels
			> .#{$carousel-class-prefix}carousel__wrap > .slick-list > .slick-track {
				display: -webkit-flex;
				display: -ms-flexbox;
				display: flex;
			}
		}
	}

	.#{$carousel-class-prefix}carousel {

		&__wrap,
		&__item {
			padding: 0;
			margin: 0;
			list-style: none;
		}

		&__item {
			padding: $carousel-padding ( $carousel-padding * 1.25 );

			&.u-align-top,
			&.u-align-middle,
			&.u-align-bottom {
				display: -webkit-flex;
				display: -ms-flexbox;
				display: flex;
				-ms-flex-direction: column;
				flex-direction: column;
			}
		}
	}
}