@import 'mixins.scss';
@import 'common.scss';

ul.dt-buttons {
	li {
		margin: 0;
	}

	li.active a {
		box-shadow: inset 0 0 10px rgba(0,0,0,.6);
	}
}

ul.dt-buttons.button-group a {
	margin-bottom: 0; // Foundation has a -2px margin, but that causes the
	                  // active class to look wrong
}

div.dt-button-collection {
	position: absolute;

	@include dtb-fixed-collection();

	&.fixed {
		max-width: none;

		&:before,
		&:after {
			display: none;
		}
	}
}

div.dt-button-background {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 88;
}

@media screen and (max-width: 767px) {
	ul.dt-buttons {
		float: none;
		width: 100%;
		text-align: center;
		margin-bottom: 0.5rem;

		li {
			float: none;
		}
	}
}


// Foundation 6
div.button-group.stacked.dropdown-pane {
	margin-top: 2px;
	padding: 1px;
	z-index: 89;

	a.button {
		display: block;
		margin-bottom: 1px;
		border-right: none;

		&:last-child {
			margin-bottom: 0;
			margin-right: 1px;
		}
	}
}

div.dt-buttons {
	button.button.processing,
	div.button.processing,
	a.button.processing {
		@include dtb-processing();

		color: rgba( 255, 255, 255, 0.2 );
		border-top-color: white;
		border-bottom-color: white;
	}
}