/**
name: Carousel
type: ui
desc: >
	# Structure

	1. Required structure for carousel needs wrapping holder with width and 'overflow: hidden' property.

	2. List of items in the same line. You can use parent holder for them with 'width: 99999px'. Each item needs attribute 'data-alias="item"'.

	3. Previous and next buttons are not necessary. Also they need attributes 'data-alias="prev"' and 'data-alias="next"'.

	4. For switcher functionality just add any structure with the same quantity as item's amount. Every switcher's item needs attribute 'data-alias="switcher"'.

examples:
	- name: Default carousel
	  tmpl:
	  	  include: carousel.html
*/
.carousel {
	$root: &;
	overflow: hidden;
	position: relative;
	width: 100%;

	&__holder {
		position: relative;
		width: 99999px;
	}

	&__item {
		float: left;
	}

	&__prev,
	&__next {
		background-color: $color-telenor-blue-dark;
		border-radius: 50%;
		color: $color-white;
		opacity: 0;
		position: absolute;
		cursor: pointer;
		top: 50%;
		left: $small-spacing-unit;
		transition: opacity .2s ease-in;
		font-size: 30px;
		padding: 5px 7px 5px 3px;
		transform: translate(0, -50%);

		&.disabled {
			cursor: default;
			background-color: $color-silver-grey;
		}

		i {
			display: block;
			line-height: 1;
		}
	}

	&__next {
		left: auto;
		padding: 5px 3px 5px 7px;
		right: $small-spacing-unit;
	}

	&:hover {
		#{$root}__prev,
		#{$root}__next {
			opacity: .7;

			&:hover {
				opacity: 1;
			}
		}
	}
}