/* ===== Shortcut Button Setting (shortcut-button-setting.php) ===== */
/* Select2 Style for Shortcut Button */
.sidetalk-shortcut-button-setting .select2-container {
	display: block;
	width: 100% !important;
}

.sidetalk-shortcut-button-setting .select2-container--default .select2-selection--single {
	height: 40px;
	border: 1px solid var(--st-border-light);
	border-radius: 0.75rem;
	display: flex;
	align-items: center;
	background-color: var(--st-bg-primary) !important;
	transition: border-color 0.2s;
	margin-bottom: 10px;
	color: var(--st-text-dark) !important;
	box-sizing: border-box;
}

.sidetalk-shortcut-button-setting .select2-container--default.select2-container--open .select2-selection--single,
.sidetalk-shortcut-button-setting .select2-container--default .select2-selection--single:focus {
	border-color: var(--st-primary);
	outline: none;
}

.sidetalk-shortcut-button-setting .select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: normal;
	padding-left: 12px;
	padding-right: 30px;
	color: var(--st-text-dark) !important;
	font-size: 17px;
	font-weight: 500;
}

.sidetalk-shortcut-button-setting .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 38px;
	right: 6px;
}

.sidetalk-shortcut-button-setting .select2-dropdown {
	border: 1px solid var(--st-primary);
	border-radius: 6px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
	z-index: 10001;
	background-color: var(--st-bg-primary);
}

.select2-container--open .select2-dropdown--below {
	margin-top: 20px;
}

.sidetalk-shortcut-button-setting .select2-search--dropdown {
	padding: 8px 12px;
}

.sidetalk-shortcut-button-setting .select2-search--dropdown .select2-search__field {
	padding: 8px;
	border-radius: var(--st-radius-xs);
	border: 1px solid var(--st-border-lighter);
	font-size: 14px;
	font-weight: 500;
	color: var(--st-text-dark);
	background-color: var(--st-bg-primary);
}

/* Shortcut Button: Grid Alignment Fix for Message Type */
.custom-link-row.type-message {
	grid-template-columns: 1fr 1fr 2fr 1fr auto !important;
}

.custom-link-row.type-message .custom-link-field:nth-child(3) {
	grid-column: 3 / 5 !important;
}

.custom-link-row.type-message .custom-link-remove {
	grid-column: 5 !important;
}
