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

div.dt-button-collection.ui.dropdown {
	position: absolute;
	width: 200px;
	margin-top: 3px !important;
	z-index: 2002;
	transition: none;
	
	// Move styles to parent container
	box-shadow: 0 2px 3px 0 rgba(34,36,38,.15);
	border: 1px solid rgba(34,36,38,.15);
	border-radius: .28571429rem;
	background-color: white;

	div.menu {
		position: relative;
		display: block;
		right: auto !important;
		min-width: 200px !important;
		box-shadow: none;
		border: none;
		border-radius: 0;
		transition: none;
		background: transparent;
	}

	div.dt-button-collection-title {
		font-size: 1rem;
		padding: 1em 0.75em 0.5em;
	}

	i.dropdown.icon::before {
		content: "\f0da" !important;
	}

	&.columns {
		div.ui.basic.buttons {
			span.dt-button-spacer {
				background: transparent !important;
				border: none;
				flex: 1 1 100%;

				&:hover {
					background: transparent !important;
				}
			}
		}
	}

	&:not(.columns) {
		.ui.vertical.buttons {
			width: 100%;
			border: none;
		}
	}

	&.columns {
		.ui.vertical.buttons {
			flex-direction: row;
			border: none;
		}
	}

	.dt-button {
		&:focus {
			outline-offset: -2px;
		}
	}

	div.dt-button-split {
		display: flex;

		div:first-child {
			flex-grow: 1 !important;
			flex-basis: auto !important;
			width: auto !important;
			border-left: none !important;

			position: relative;
			cursor: pointer;
			display: block;
			border: none;
			height: auto;
			min-height: 2.57142857rem;
			text-align: left;
			line-height: 1em;
			font-size: 1rem;
			color: rgba(0,0,0,.87);
			padding: .78571429rem 1.14285714rem;

			&:hover {
				background: rgba(0,0,0,.05);
				color: rgba(0,0,0,.95);
				z-index: 13;
			}
		}

		button:last-child {
			flex: 0 1 0 !important;
			min-width: 32px;
			border: none;
			background: transparent;

			&:hover {
				background: rgba(0,0,0,.05);
				color: rgba(0,0,0,.95);
				z-index: 13;
			}
		}
	}

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

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

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

		a.btn {
			float: none;
		}
	}
}

div.dt-buttons {
	button.button.processing,
	div.button.processing,
	a.button.processing {
		position: relative;

		@include mixins.dtb-processing();
	}


	&.ui.buttons {
		flex-wrap: wrap;
	}

	.button {
		span.dt-button-down-arrow {
			position: relative;
			top: -2px;
			font-size: 10px;
			padding-left: 10px;
			line-height: 1em;
			opacity: 0.6;
		}
	}

	.dt-button-split-drop span.dt-button-down-arrow {
		padding-left: 0;
	}
}

span.dt-button-spacer {
	cursor: inherit;

	&.bar {
		padding-left: 1.5em;

		&:empty {
			height: inherit;
		}
	}
}

div.dt-button-collection span.dt-button-spacer {
	border-top: 1px solid rgba(34,36,38,.15);

	&.bar {
		border-bottom: none;
		padding-left: 1.5em;
	}
}

div.dt-buttons.ui.basic.buttons .button.dt-button-spacer {
	background: rgba(34,36,38,.05) !important;
	box-shadow: none;
	cursor: initial;

	&:hover {
		background-color: rgba(34,36,38,.05) !important;
	}
}

div.dt-button-split {
	border-left: 1px solid rgba(34,36,38,.15);

	button:first-child,
	button:last-child {
		border-radius: 0px !important;
	}

	&:active:not(.disabled),
	&.active:not(.disabled) {
		button.button {
			background-color: #f8f8f8 !important;
		}
		button.dt-button-split-drop {
			box-shadow: none;
			background-color: transparent !important;
		}
		button.button {
			&:hover {
				background-color: transparent !important;
			}
		}
	}
}