/**
 * القائمة المنسدلة الموحدة (UI::field select وأي <select class="tnt-input">)
 * السهم والألوان من متغيرات --tnt-select-* في base/tokens.css
 * نفس الشكل يُطبق على قوائم ووردبريس في wp/forms.css
 */

.tnt select.tnt-input {
	appearance: none; -webkit-appearance: none; cursor: pointer;
	padding-inline-end: 46px; color: var(--tnt-text);
	/* السهم داخل مربع صغير في جهة النهاية (اليسار في العربية) */
	background-color: var(--tnt-surface);
	background-image: var(--tnt-select-arrow), linear-gradient(var(--tnt-select-arrow-bg), var(--tnt-select-arrow-bg));
	background-repeat: no-repeat, no-repeat;
	background-size: 16px 16px, 30px calc(100% - 12px);
	background-position: left 15px center, left 6px center;
}
[dir="ltr"] .tnt select.tnt-input { background-position: right 15px center, right 6px center; }
.tnt select.tnt-input:hover { border-color: var(--tnt-gold); color: var(--tnt-text); }
.tnt select.tnt-input:focus { --tnt-select-arrow-bg: var(--tnt-gold-50); color: var(--tnt-text); border-color: var(--tnt-gold-600); box-shadow: var(--tnt-ring); }
.tnt select.tnt-input[multiple] { background-image: none; padding-inline-end: 14px; min-height: 120px; }
.tnt select.tnt-input option { font-family: var(--tnt-font); padding: 6px; }
.tnt select.tnt-input option:checked { background: var(--tnt-primary-50); color: var(--tnt-navy-900); }
.tnt select.tnt-input:disabled { cursor: not-allowed; opacity: .6; }