
@use 'mixins.scss';
@use 'common.scss';

div.dt-buttons {
	position: relative;
	float: left;

	.dt-button {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		margin-right: 0;

		span.ui-icon {
			display: inline-block;
			vertical-align: middle;
			margin-top: -2px;
		}

		&.processing{
			@include mixins.dtb-processing();
		}

		&:active {
			outline: none;
		}
	}
}

div.dt-button-collection {
	position: absolute;
	top: 0;
	left: 0;
	width: 200px;
	margin-top: 3px;
	padding: 8px 8px 4px 8px;
	border: 1px solid #ccc;
	border: 1px solid rgba( 0, 0, 0, 0.4 );
	background-color: #f3f3f3;
	overflow: hidden;
	border-radius: 5px;
	box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
	z-index: 2002;
	column-gap: 0;

	.dt-button {
		position: relative;
		left: 0;
		right: 0;
		width: 100%;
		box-sizing: border-box;
		text-align: left;

		float: none;
		margin-right: 0;
		margin-bottom: 4px;

		display: flex;
		float: none;
		justify-content: space-between;
		align-items: center;

		.ui-icon {
			margin-right: -9px;
		}
	}

	.dt-button-split {
		width: 100%;

		button:last-child {
			display: block;
		}
	}

	@include mixins.dtb-fixed-collection();
}

div.dt-button-split {
	display: inline-flex;
	vertical-align: middle;

	&:hover {
		border: none;
	}

	button:first-child {
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
	}

	button:last-child {
		padding: .4em 1em;
		width: 24px;
		margin-left: -1px;
		overflow: visible;

		span {
			margin-left: -7px;
		}
	}
}

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

	@include mixins.dtb-radial-gradient( rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7) );

	z-index: 2001;
}


@media screen and (max-width: 640px) {
	div.dt-buttons {
		float: none !important;
		text-align: center;
	}
}

