// Transport
// 
// The transport is just that, a transport. It takes you from one place to another, either another page, another bit of the carousel, or anything else like that.
// 
// Styleguide 24

// Transport
// 
// Markup:
// <div class="transport-{{modifier_class}}"></div>
// 
// top			- top
// right		- right
// bottom		- bottom
// left			- left
// 
// Styleguide 24.1

// new one-line transports. could this be the future?
.transport {
	@transport-width: 5px;
	&-top,
	&-right,
	&-bottom,
	&-left {
		.inactive;

		position: relative;
		top: 3px;
		left: 4px;

		display: inline-block;

		cursor: pointer;

		background-repeat: no-repeat;
		border-top: @transport-width solid transparent;
		border-right: @transport-width solid transparent;
		border-bottom: @transport-width solid transparent;
		border-left: @transport-width solid transparent;
	}
	&-top {
		top: -3px;

		border-bottom: @transport-width solid @colorS4;
	}
	&-right {
		top: 0;
		left: 7px;

		border-left: @transport-width solid @colorS4;
	}
	&-bottom {
		border-top: @transport-width solid @colorS4;
	}
	&-left {
		top: 0;
		left: 2px;

		border-right: @transport-width solid @colorS4;
	}
}