.glide {
	$that: '.glide' !default;


	&__wrapper {}


	&__track {}


	&__slide {}


	&__arrows {
		position: absolute;

		#{$that}--horizontal & {
			top: 50%;
			width: 92%;
			margin-left: 4%;
		}

		#{$that}--vertical & {
			left: 50%;
			height: 88%;
			margin-top: 6%;
		}
	}


	&__arrow {
		position: absolute;
		z-index: 2;
		color: white;
		text-transform: uppercase;
		font: 11px Arial, sans-serif;
		padding: 9px 12px;
		background-color: transparent;
		border: 2px solid rgba(255, 255, 255, 0.5);
		border-radius: 4px;
		opacity: 1;
		transition: opacity 150ms ease, border 300ms ease-in-out;

		&.disabled {
			opacity: 0.33;
		}

		&:focus { outline: none; }
		&:hover { border-color: white; }

		#{$that}--horizontal & {
			transform: translateY(-50%);

			&.prev { left: 0; }
			&.next { right: 0; }
		}

		#{$that}--vertical & {
			transform: translateX(-50%);

			&.prev { top: 0; }
			&.next { bottom: 0; }
		}
	}


	&__bullets {
		position: absolute;
		z-index: 2;
		list-style: none;

		#{$that}--horizontal & {
			bottom: 8%; left: 0;
			width: 100%;
			height: 12px;
			text-align: center;
		}

		#{$that}--vertical & {
			top: 50%; right: 8%;
			width: 12px;
			height: auto;
			transform: translateY(-50%);
		}

		& > * {
			display: inline-block;
			background-color: rgba(255, 255, 255, 0.5);
			width: 12px;
			height: 12px;
			padding: 0;
			cursor: pointer;
			border-radius: 50%;
			border: 2px solid transparent;
			transition: all 300ms ease-in-out;

			#{$that}--horizontal & {
				margin: 0 5px;
			}

			#{$that}--vertical & {
				vertical-align: middle;
			}

			&.active { background-color: white; }

			&:focus { outline: none; }

			&:hover,
			&:focus {
				border: 2px solid white;
				background-color: rgba(255, 255, 255, 0.5);
			}
		}
	}


	&--slider {}

	&--carousel {}

	&--slideshow {}
}