@mixin slider {
	&__items {
		opacity: 0;
		visibility: hidden;
		height: 100px;

		&.is-loaded {
			opacity: 1;
			visibility: visible;
			height: auto;
		}
	}

	&__nav {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		pointer-events: none;
		position: absolute;
		width: 100%;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);

		> button {
			display: flex;
			position: relative;
			padding: 0 0 0 10px;
			color: rgba(#fff, 0.4);
			pointer-events: visible;
			font-size: 12px;
			font-weight: 700;

			&:after {
				content: '';
				display: block;
				width: 1px;
				height: 60px;
				margin-left: 8px;
				background-color: rgba(#fff, 0.6);
			}

			&:not(:first-child) {
				margin-top: 8px;
			}

			&.tns-nav-active {
				color: #fff;

				&:after {
					background-color: #fff;
				}
			}
		}
	}

	&__controls {
		display: flex;
		justify-content: flex-end;
		position: absolute;
		width: 100%;
		bottom: 30px;
		left: 50%;
		transform: translateX(-50%);

		> button {
			display: block;
			width: 50px;
			height: 50px;
			border-radius: 50%;
			padding: 0;
			background-color: rgba(#fff, 0.1);
			transition: 0.3s background-color;
			font-size: 14px;
			color: #fff;

			&:not(:first-child) {
				margin-left: 8px;
			}

			&:disabled {
				opacity: 0.3;
				pointer-events: none;
				cursor: default;
			}
		}
	}

	@include media-breakpoint-up(lg) {
		&__controls {
			> button {
				&:hover {
					background-color: rgba(#fff, 0.3);
				}
			}
		}
	}

	@include media-breakpoint-down(md) {
		&__nav {
			flex-direction: row;
			top: auto;
			bottom: 110px;
			transform: translateX(-50%);

			> button {
				flex-direction: column;
				align-items: flex-end;
				width: 100%;
				padding: 10px 0 0;

				&:after {
					content: '';
					width: 100%;
					height: 1px;
					margin-left: 0;
					margin-top: 10px;
					background-color: rgba(#fff, 0.6);
				}

				&:not(:first-child) {
					margin-top: 0;
					margin-left: 30px;
				}
			}
		}
	}
}
