.button-control {
	-webkit-touch-callout: none !important;
	-webkit-user-select: none !important;
	user-select: none !important;
	touch-action: none;

	padding: Min(5px, 10%);
	height: fit-content;
	display: inline-block;
	border: 1px solid transparent;

	&.clickable {
		cursor: pointer;
	}

	&.selected .button-border {
		border: 1px solid #d50215 !important;
		box-shadow: 0px 0px 0px 1px #d50215 inset;
	}

	&.fixed .button-border {
		width: 72px;
		height: 72px;
	}

	&.drophere {
		border: 1px dashed black;
		background-color: #eee;
	}

	&.drophover {
		border: 1px solid black;
		background-color: #daffab;
	}

	// &.draggable img {
	// 	-webkit-user-drag: inherit;
	// }

	.button-border {
		position: relative;
		object-fit: contain;
		display: block;
		margin: 0 auto;
		padding-bottom: calc(100% - 2px); // minus border

		border-radius: Max(12%, 4px);
		border: 1px solid rgba(100, 100, 100, 0.4);

		background-color: #000;
		background-size: contain;
		background-position: center;
		background-repeat: no-repeat;

		.button-placeholder {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;

			display: flex;
			justify-content: center;
			align-items: center;

			padding: 5px;

			color: #262626;
			font-size: 1.5rem;
			font-weight: bold;
		}
	}
}

.button-page-input {
	font-size: 1.2em;
	// text-align: center;
	display: block;
	min-width: 150px;

	// HACK: Safari has issues with drawing scrollbars due to a sub-component having a higher z-index
	// https://github.com/bitfocus/companion/issues/2407
	z-index: 100;
}

.button-page-name {
	color: black;
	font-weight: normal;
	font-size: 1.2em;
}
