@include body-class(true) {

	// ELEMENT: Slider
	.dashui-slider {
		display: block;
		position: relative;

		// ELEMENT: Chosen Image
		.dashui-slider-main {
			width: 100%;
			overflow: hidden;
			display: flex;
			position: relative;

			&, li {
				margin: 0;
				padding: 0;
				border: 0;
				list-style: none;
			}

			li {
				min-width: 100%;
				opacity: 0;
				display: block;
				flex: 0 0 100%;
				position: absolute;
				top: 0;
				left: 0;
				transition: 0.4s ease;

				img {
					width: 100%;
					max-width: 100%;
					height: auto;
					display: block;
					margin: 0;
					padding: 0;
					border: 0;
				}

				&.current {
					opacity: 1;
				}
			}
		}

		// ELEMENT: Navigation
		.dashui-slider-nav {
			display: flex;
			align-items: center;

			button {
				width: 40px;
				height: 64px;
				cursor: pointer;
				display: flex;
				flex: 0 0 auto;
				align-items: center;
				margin: 0;
				padding: 0;
				border: 0;
				background-color: transparent;
				color: palette(silver, medium);
				transition: $transition;

				[class*="sui-icon-"] {
					width: 40px;
					display: block;
					font-size: 16px;
					text-align: center;

					&:before {
						display: block;
						color: inherit;
					}
				}

				&,
				&:hover,
				&:focus,
				&:active {
					outline: none;
					box-shadow: none;
				}

				&:hover,
				&:active {
					background-color: palette(silver);
					color: palette(gray, dark);
				}
			}

			.dashui-slider-nav-items {
				overflow: hidden;
				display: flex;
				align-items: center;
				flex: 1;

				ul, li {
					margin: 0;
					padding: 0;
					border: 0;
					list-style: none;
				}

				ul {
					display: flex;
				}

				li {
					min-width: 100px;
					cursor: pointer;
					flex: 0 0 100px;
					display: block;
					position: relative;

					@include icon(before, plus) {
						width: 100%;
						height: 100%;
						opacity: 0;
						display: flex;
						align-items: center;
						justify-content: center;
						position: absolute;
						top: 0;
						left: 0;
						background-color: rgba(51, 51, 51, 0.1);
						color: palette(gray, dark);
						font-size: 16px;
						transition: $transition;
					}

					span {
						width: 100%;
						height: 64px;
						display: block;
						background-size: cover;
						background-repeat: no-repeat;
						background-position: center;
						box-shadow: none;
						transition: $transition;
					}

					&:hover,
					&:active {

						&:before {
							opacity: 1;
						}
					}

					&.current span {
						box-shadow: inset 0 -2px 0 0 palette(gray, dark);
					}
				}

				@include media(max-width, md) {
					display: none;
				}
			}

			@include media(max-width, md) {
				width: 100%;
				justify-content: space-between;
				position: absolute;
				top: 50%;
				left: 0;
				transform: translateY(-50%);
			}
		}
	}

	// ELEMENT: Slider Message
	.dashui-slider-notice {
		@extend %dashui-view-more-info;
	}

	// FIX: Flush slider if it's placed inside flushed tabs
	.sui-tabs-flushed {

		div > .sui-tab-content {

			.dashui-slider {

				@include media(max-width, md) {
					margin: -#{$sui-gutter-md} -#{$sui-gutter-md} 0;
				}

				@include media(min-width, md) {
					margin: -#{$sui-gutter} -#{$sui-gutter} 0;
				}
			}
		}
	}
}