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

div.dt-buttons.button-group {
	div.dt-button-split {
		margin-bottom: 0;

		> button:last-child {
			margin-right: 1px;
		}

		a.dt-button {
			margin-right: 0;
		}

		li {
			overflow: hidden;
			white-space: nowrap;

			a {
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
	}
}

div.dt-button-collection {
	position: absolute;
	width: 200px;
	margin-top: 3px !important;
	z-index: 2002;

	// Menu styles need to be on the container, not the dropdown, to allow for the title
	border: 1px solid #cacaca;
	background: #fefefe;

	li {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.dt-button-down-arrow {
			width: 24px;
		}
	}

	.dropdown.menu {
		position: relative;
		width: 100%;
		display: block;
		left: 0;
		
		border: none;
		background: transparent;

		.dt-button {
			position: relative;

			a:focus {
				outline-offset: -2px;
			}
		}
	}

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

	div.dt-button-split {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-content: flex-start;
		align-items: stretch;

		> *:first-child {
			min-width: auto;
			flex: 1 0 50px;
			padding-right: 0;
			margin-right: 0;
		}

		> *:last-child {
			min-width: 33px;
			flex: 0;
			background: transparent;
			border: none;
			line-height: 1rem;

			&:after {
				border-top-color: #1779ba;
				margin-left: -10px;
			}
		}
	}

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