@topvisor/ui 0.0.13 → 0.0.14

package/core.css

@@ -201,374 +201,445 @@
 	--color-top-50: #A6E0A3;
 	--color-top-100: #C7D7D7;
 	--color-top-10000: #FCC94A;
-}.top-comment {
-    color: var(--color-gray-350);
-    font-size: 12px;
-}
-
-.top-title {
-    margin: 1em 0;
-    font-weight: 600;
-}:root {
-	--top-font-size: 14px;
-	
-	--top-forms-radius: 8px;
-	--top-forms-border-width: 1px;
-	--top-style_outline-color: transparent;
-
-	--top-forms-base-height: 32px;
-	/* базовая высота поля, должна быть одинаковой у всех форм в одном контексте */
-	--top-forms-base-height_l: 36px;
-	--top-forms-base-height_xl: 40px;
-
-	--top-forms-padding: 8px;
-	--top-forms-padding_l: 12px;
-	--top-forms-padding_xl: 16px;
-
-	--top-forms-padding_xl: 16px;
-
-	/* top-radio */
-	--top-radio-color: var(--color-primary);
-	--top-radio-color-hover: var(--color-primary-2);
-}
-
-/* common wrappers */
-.top-input,
-.top-radio.top-radio-system,
-.top-radio.top-radio-is_sign,
-.top-select,
-.top-selectorGroup{
-	height: auto; min-height: var(--top-forms-base-height); max-width: 100%;
-	vertical-align: middle;
-	display: inline-flex; align-items: center;
-}
-
-button,
-input,
-textarea,
-select{
-	border: 1px solid var(--top-forms-border-color);
-	color: var(--top-forms-color);
-	font-size: var(--top-font-size);
-	font-family: inherit;
-}
-
-.top-button,
-.top-input_input,
-.top-checkbox_input,
-.top-radio_input,
-textarea.top-el,
-.top-select_select {
-	display: inline-block;
-	vertical-align: middle;
-	appearance: none;
-	-webkit-appearance: none;
-}
-
-.top-input_input,
-textarea.top-el,
-.top-select_select {
-	border: 1px solid var(--top-forms-border-color);
-	color: var(--top-forms-color);
-}
-
-/* placeholder для textarea */
-[contenteditable][placeholder]:empty:before {
-	content: attr(placeholder);
-	color: var(--color-text-secondary);
-}
-
-[type="text"].top-el,
-[type="number"].top-el,
-[type="date"].top-el,
-[type="email"].top-el,
-[type="password"].top-el,
-textarea.top-el,
-select.top-el,
-.top-button {
-	box-sizing: border-box;
-	border-radius: var(--top-forms-radius);
-	border: var(--top-forms-border-width) solid var(--top-forms-border-color);
-	height: var(--top-forms-base-height);
-	padding: 0;
-	padding-right: calc(var(--top-forms-padding) + var(--top-forms_clear-width) + var(--top-select_arrow-width));
-	padding-left: calc(max(var(--top-forms-padding), var(--top-icon-both-width)));
-
-	transition: border-color 150ms;
-}
-
-[type="text"].top-el,
-[type="number"].top-el,
-[type="date"].top-el,
-[type="email"].top-el,
-[type="password"].top-el,
-[type="checkbox"].top-el,
-[type="radio"].top-el,
-textarea.top-el,
-.top-input,
-select.top-el,
-i.top-el,
-span.top-el {
-	color: var(--top-forms-color);
-	white-space: nowrap;
-	display: inline-flex;
-}
-
-[type="checkbox"][class*="top"],
-[type="radio"][class*="top"] {
-	padding: 8px 0;
-	line-height: 1.3;
-}
-
-.top-button:not(:disabled):focus-visible,
-[type="checkbox"]:focus-visible,
-[type="radio"]:focus-visible {
-	outline: 2px solid var(--top-radio-color);
-	outline-offset: 2px;
-	position: relative;
-	z-index: 1;
-}
-
-[type="checkbox"]:before,
-[type="checkbox"]:after,
-[type="radio"]:before,
-[type="radio"]:after,
-.top-select:before {
-	vertical-align: middle;
-	display: inline-block;
-}
-
-/* [type="checkbox"].top-el,
-[type="radio"].top-el{
-	background: none; width: auto; height: auto; min-height: var(--top-forms-base-height);
-	text-indent: 0;
-} */
-
-/* label checkbox, label radio */
-label.top-checkbox,
-label.top-radio {
-	cursor: pointer;
-	padding: 8px 0;
-	color: var(--top-forms-color);
-	line-height: 1.3;
-	display: inline-flex;
-	align-items: flex-start;
-	gap: 8px;
-}
-
-label.top-checkbox > [type="checkbox"][class*="top"],
-label.top-radio > [type="radio"][class*="top"] {
-	min-height: unset !important;
-	padding: 0;
-	margin: 0;
-}
-
-.top-checkbox_caption[data-top-icon]:before,
-.top-radio_caption[data-top-icon]:before {
-	height: 16px;
-}
-
-/* checkbox, radio */
-[type="checkbox"].top-el,
-[type="radio"].top-el {
-	cursor: pointer;
-	border: none;
-	white-space: normal;
-}
-[type="checkbox"].top-el:before,
-[type="radio"].top-el:before {
-	flex-shrink: 0;
-}
-[type="checkbox"][title].top-el:after,
-[type="checkbox"][title].top-checkbox_input-switcher:after,
-[type="radio"][title].top-el:after {
-	content: attr(title);
-	margin-left: 8px;
-}
-
-[type="checkbox"][data-top-icon]:not(.top-checkbox_input-switcher),
-[type="radio"][data-top-icon]:not(.top-radioGroup_item) {
-	--top-icon-size: 24px;
-}
-[type="checkbox"][data-top-icon]:not(.top-checkbox_input-switcher):before,
-[type="radio"][data-top-icon]:not(.top-radioGroup_item):before {
-	text-indent: calc(18px + 4px);
-}
-[type="checkbox"][data-top-icon].top-el:not(.top-checkbox_input-switcher):after,
-[type="radio"][data-top-icon].top-el:not(.top-radioGroup_item):after {
-	text-indent: var(--top-icon-both-width);
-}
-
-/* убрать ширину добавляемых элементов */
-label.top-el[data-top-icon],
-label.top-el[data-top-icon2] {
-	position: relative;
-}
-label.top-el[data-top-icon]:before,
-label.top-el[data-top-icon2]:after {
-	position: absolute;
-	z-index: 3;
-}
-label.top-el[data-top-icon][data-top-icon2]:after {
-	left: calc(var(--top-icon-width));
-}:root {
-    --top-icon-size: 0px;
-    --top-icon-width: 0px;
-
-    --top-icon2-size: 0px;
-    --top-icon2-width: 0px;
-
-    --top-icon-both-width: 0px;
-}
-
-/* data-top-icon */
-[data-top-icon] {
-    --top-icon-size: 24px;
-    --top-icon-width: calc(var(--top-icon-size) + var(--top-forms-padding));
-    --top-icon-color: inherit;
-}
-[data-top-icon2] {
-    --top-icon2-size: 24px;
-    --top-icon2-width: calc(var(--top-icon2-size) + 8px);
-    --top-icon2-color: inherit;
-}
-[data-top-icon=""] {
-    --top-icon-width: 0px;
-}
-[data-top-icon2=""] {
-    --top-icon2-width: 0px;
-}
-
-[data-top-icon]:before,
-[data-top-icon2]:after {
-    pointer-events: none;
-    content: attr(data-top-icon);
-    border-radius: var(--top-forms-radius);
-    width: var(--top-icon-width);
-    color: var(--top-icon-color);
-    font-family: Topvisor-2;
-    font-size: var(--top-icon-size);
-    font-weight: 400;
-    line-height: 1;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-}
-[data-top-icon2]:after {
-    content: attr(data-top-icon2);
-    width: var(--top-icon2-width);
-    color: var(--top-icon2-color);
-    font-size: var(--top-icon2-size);
-}
-
-/* ширина добавляемых элементов */
-[data-top-icon],
-[data-top-icon2] {
-    --top-icon-both-width: calc(var(--top-icon-width) + var(--top-icon2-width));
-}
-
-[data-top-icon=""]:before {
-    font-family: Topvisor;
-}.top-ellipsis {
-	max-height: 100%;
-	text-overflow: ellipsis;
-	overflow: hidden;
-	line-height: 1.23;
-	flex-grow: 1;
-}
-.top-ellipsis2,
-.top-ellipsis3 {
-	max-width: fit-content;
-	display: -webkit-box;
-	-webkit-line-clamp: 2;
-	-webkit-box-orient: vertical;
-	overflow: hidden;
-}
-.top-ellipsis3 {
-	-webkit-line-clamp: 3;
-}/* top-inited используется для блокировки элементов, js к которым еще не привязан, настраивается в каждом модуле отдельно */
-.top-inited {}
-
-.top-hidden {
-	display: none !important;
-}
-
-/* top-unvisible используется для скрытия элементов, без изменения видимости */
-.top-unvisible {
-	width: 0;
-	height: 0;
-	overflow: hidden;
-	position: absolute;
-}
-
-.top-loading {}
-
-.top-disabled {
-	pointer-events: none;
-}
-
-.top-error,
-.top-error::placeholder,
-.top-error:before {
-	--top-forms-border-color: var(--color-negative);
-
-	border-color: var(--color-negative);
-}
-.top-error {
-	--top-icon-color: var(--color-negative);
-
-	color: var(--color-negative);
-}
-.top-error ~ .top-forms-caption {
-	color: var(--color-negative);
-}
-
-.top-warning {
-	--top-icon-color: var(--color-orange-500);
-
-	color: var(--color-orange-500);
-}
-
-input.top-error {
-	animation: top-error 0.3s;
-}
-
-@keyframes top-error {
-	0% {}
-	30% {
-		box-shadow: inset var(--color-red-200) 0 0 20px;
-	}
-	100% {}
-}@media only screen and (min-width: 900px) {
-	.top-only-mobile {
-		display: none !important;
-	}
-}
-@media only screen and (max-width: 900px) {
-	.top-only-pc {
-		display: none !important;
-	}
-}
-
-html:not([lang="ru"]) .top-only-ru,
-html:not([lang="en"]) .top-only-en {
-	display: none !important;
-}
-
-html[data-is_admin="0"] .top-only-admin {
-	display: none !important;
-}/* TODO: перенести в компонент */
-.top-select_arrow{
-	--top-select_arrow-color: var(--color-gray-600);
-	--top-select_arrow-size: 12px;
-	--top-select_arrow-width: 24px;
-
-	background-image: url("data:image/svg+xml,%3Csvg width='16' height='9' viewBox='0 0 16 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.293 0.29269L8 6.5857L1.70704 0.29269C1.31679 -0.0975633 0.682937 -0.0975633 0.292687 0.29269C-0.0975624 0.682943 -0.0975624 1.31656 0.292687 1.70682L7.29294 8.70713C7.68343 9.09762 8.31657 9.09762 8.70706 8.70713L15.7073 1.70682C16.0976 1.31656 16.0976 0.682943 15.7073 0.29269C15.3171 -0.0975633 14.6832 -0.0975633 14.293 0.29269Z' fill='%23808A99'/%3E%3C/svg%3E");
-	background-size: 14px;
-	background-position: calc(100% - var(--top-forms-padding)) 50%;
-	background-repeat: no-repeat;
-	padding-right: 32px;
-}
-
-.top-select_arrow ~ [data-action="top-input_clear"]{ --top-select_arrow-width: 24px; }
+}:root {
+    --top-padding-1: 4px;
+    --top-padding-2: 8px;
+    --top-padding-3: 12px;
+    --top-padding-4: 16px;
+    --top-padding-5: 20px;
+    --top-padding-6: 24px;
+    --top-padding-7: 28px;
+    --top-padding-8: 32px;
+    --top-padding-9: 36px;
+    --top-padding-10: 40px;
+    --top-padding-11: 44px;
+    --top-padding-12: 48px;
+
+    --top-gap-1: 4px;
+    --top-gap-2: 8px;
+    --top-gap-3: 12px;
+    --top-gap-4: 16px;
+    --top-gap-5: 20px;
+    --top-gap-6: 24px;
+    --top-gap-7: 28px;
+    --top-gap-8: 32px;
+    --top-gap-9: 36px;
+    --top-gap-10: 40px;
+    --top-gap-11: 44px;
+    --top-gap-12: 48px;
+
+    --top-radius-1: 4px;
+    --top-radius-2: 8px;
+    --top-radius-3: 12px;
+    --top-radius-4: 16px;
+    --top-radius-5: 20px;
+    --top-radius-6: 24px;
+    --top-radius-7: 28px;
+    --top-radius-8: 32px;
+    --top-radius-9: 36px;
+    --top-radius-10: 40px;
+    --top-radius-11: 44px;
+    --top-radius-12: 48px;
+}.top-comment {
+	color: var(--color-gray-350);
+	font-size: 12px;
+}
+
+.top-title {
+	margin: 1em 0;
+	font-weight: 600;
+}
+
+/* formsCaption */
+:root {
+	--top-formsCaption-offset: 16px;
+}
+
+.top-formsCaptionWrapper {
+	padding-top: 20px;
+}
+
+.top-formsCaption {
+	pointer-events: none;
+	width: calc(100% - var(--top-forms-padding) - var(--top-icon-both-width) - var(--top-forms_clear-width) - var(--top-select_arrow-width));
+	padding: 0 var(--top-forms-padding);
+	color: var(--color-placeholder);
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	transform: translate(var(--top-icon-both-width), 0);
+	position: absolute;
+	overflow: hidden;
+	transition: 0.1s;
+}
+.top-error ~ .top-formsCaption {
+	transition: 0.1s 0.1s;
+}
+/* перефокусировка на поле не должна влиять на отображении заголовка */
+.top-formsCaption * {
+	pointer-events: auto;
+}
+
+.top-formsCaptionWrapper > input:not([readonly]):focus ~ .top-formsCaption,
+.top-formsCaptionWrapper > input:not(:placeholder-shown) ~ .top-formsCaption,
+.top-formsCaptionWrapper > textarea:not(:placeholder-shown) ~ .top-formsCaption,
+.top-formsCaptionWrapper.top-select > .top-formsCaption,
+.top-formsCaptionWrapper.top-inputRange > .top-formsCaption,
+.top-formsCaptionWrapper-always > .top-formsCaption {
+	width: 100%;
+	padding: 0;
+	color: var(--color-placeholder-active);
+	font-size: 11px;
+	transform: translate(0, calc(-1em - var(--top-formsCaption-offset)));
+	transition: 0.1s;
+}:root {
+	--top-font-size: 14px;
+
+	--top-forms-radius: 8px;
+	--top-forms-border-width: 1px;
+	--top-style_outline-color: transparent;
+
+	--top-forms-base-height_s: 32px;
+	--top-forms-base-height_l: 36px;
+	--top-forms-base-height_xl: 40px;
+
+	/* высота поля, должна быть одинаковой у всех форм в одном контексте */
+	--top-forms-base-height: var(--top-forms-base-height_s);
+
+	--top-forms-padding: 8px;
+	--top-forms-padding_l: 12px;
+	--top-forms-padding_xl: 16px;
+
+	/* forms control */
+	--top-forms-option-height: 24px;
+	--top-forms-option-color: var(--color-primary);
+	--top-forms-option-color-hover: var(--color-primary-2);
+
+	--top-select_arrow-width: 0px;
+	--top-forms_clear-width: 0px;
+}
+
+.top-size_s {
+	--top-forms-base-height: var(--top-forms-base-height_s);
+}
+
+.top-size_l {
+	--top-forms-base-height: var(--top-forms-base-height_l);
+}
+
+.top-size_xl {
+	--top-forms-base-height: var(--top-forms-base-height_xl);
+}
+
+/* clear css */
+button,
+input,
+textarea,
+select {
+	border: 1px solid var(--top-forms-border-color);
+	color: var(--color-text);
+	font-size: var(--top-font-size);
+	font-family: inherit;
+}
+
+:placeholder {
+	color: var(--color-placeholder);
+}
+
+[contenteditable][placeholder]:empty:before {
+	content: attr(placeholder);
+	color: var(--color-text-secondary);
+}
+
+/* focusable */
+.top-forms-focusable:focus-visible {
+	outline: calc(var(--top-forms-border-width) * 2) solid var(--top-forms-option-color);
+	outline-offset: 2px;
+	position: relative;
+	z-index: 1;
+	transition: border-color 150ms;
+}
+
+/* focusable hover */
+.top-forms-focusable:hover,
+.top-forms-focusable:focus,
+textarea.top-el:not(:disabled):not([readonly]):hover,
+textarea.top-el:not(:disabled):not([readonly]):focus,
+select.top-el:not(:disabled):hover,
+select.top-el:not(:disabled):hover ~ [data-action="top-select_changer"],
+select.top-el:not(:disabled):focus {
+	--top-forms-border-color: var(--top-forms-border-color-hover);
+	--top-forms-background-color: var(--top-forms-background-color-hover);
+}
+
+/* checkbox, radio, switcher */
+.top-forms-optionWrapper {
+	cursor: pointer;
+	padding: 8px 0;
+	color: var(--color-text);
+	line-height: 1.3;
+	display: inline-flex;
+	align-items: flex-start;
+	gap: 4px;
+}
+
+.top-forms-option {
+	cursor: pointer;
+	padding: 0;
+	margin: 3px;
+	display: inline-flex;
+	flex-shrink: 0;
+	appearance: none;
+	-webkit-appearance: none;
+}
+
+/* input, textarea, select */
+.top-input_input,
+textarea.top-el,
+select.top-el {
+	box-sizing: border-box;
+	border-radius: var(--top-forms-radius);
+	border: var(--top-forms-border-width) solid var(--top-forms-border-color);
+	height: var(--top-forms-base-height);
+	padding: 0;
+	padding-right: calc(var(--top-forms-padding) + var(--top-forms_clear-width) + var(--top-select_arrow-width));
+	padding-left: calc(max(var(--top-forms-padding), var(--top-icon-both-width)));
+	display: inline-flex;
+	appearance: none;
+	-webkit-appearance: none;
+}
+
+/* TODO: select */
+.top-select {
+	cursor: pointer;
+	width: 180px;
+}
+
+.top-select:before {
+	vertical-align: middle;
+	display: inline-block;
+}
+
+select.top-el,
+label.top-select_arrow {
+	background-color: var(--top-forms-background-color);
+}
+
+select.top-el:not(:disabled):focus-visible,
+[contenteditable]:focus-visible,
+.top-selector-multiselect:focus-within {
+	outline: 2px solid var(--color-blue-100);
+}
+
+/* disabled */
+:disabled,
+:disabled ~ .top-formsCaption,
+.top-disabled[data-top-icon]:before,
+.top-disabled[data-top-icon2]:after {
+	cursor: default;
+	opacity: 0.5;
+	filter: grayscale(100%);
+	pointer-events: none;
+}
+
+/* убрать ширину добавляемых элементов */
+label[data-top-icon],
+label[data-top-icon2] {
+	position: relative;
+}
+label[data-top-icon]:before,
+label[data-top-icon2]:after {
+	position: absolute;
+	z-index: 3;
+}
+label[data-top-icon][data-top-icon2]:after {
+	left: calc(var(--top-icon-width));
+}
+
+/* text cleaner */
+.top-cleaner[data-top-icon] {
+	--top-icon-size: 20px;
+	--top-icon-width: 20px;
+	--top-icon-color: var(--color-text-secondary);
+
+	cursor: pointer;
+	border-radius: 50%;
+	width: 30px;
+	height: 24px;
+	margin-left: calc(-30px - 4px);
+	transform: translateX(calc(0px - var(--top-forms-border-width) - var(--top-select_arrow-width)));
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	position: relative;
+	z-index: 1;
+}
+.top-cleaner[data-top-icon]:hover {
+	--top-icon-color: var(--color-text-secondary-2);
+}:root {
+    --top-icon-size: 24px;
+    --top-icon-width: 0px;
+
+    --top-icon2-size: 24px;
+    --top-icon2-width: 0px;
+
+    --top-icon-both-width: 0px;
+}
+
+/* data-top-icon */
+[data-top-icon] {
+    --top-icon-width: calc(var(--top-icon-size) + var(--top-forms-padding));
+    --top-icon-color: inherit;
+}
+[data-top-icon2] {
+    --top-icon2-width: calc(var(--top-icon2-size) + 8px);
+    --top-icon2-color: inherit;
+}
+[data-top-icon=""] {
+    --top-icon-width: 0px;
+}
+[data-top-icon2=""] {
+    --top-icon2-width: 0px;
+}
+
+[data-top-icon]:before,
+[data-top-icon2]:after {
+    pointer-events: none;
+    content: attr(data-top-icon);
+    border-radius: var(--top-forms-radius);
+    width: var(--top-icon-width);
+    color: var(--top-icon-color);
+    font-family: Topvisor-2;
+    font-size: var(--top-icon-size);
+    font-weight: 400;
+    line-height: 1;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+}
+[data-top-icon2]:after {
+    content: attr(data-top-icon2);
+    width: var(--top-icon2-width);
+    color: var(--top-icon2-color);
+    font-size: var(--top-icon2-size);
+}
+
+/* ширина добавляемых элементов */
+[data-top-icon],
+[data-top-icon2] {
+    --top-icon-both-width: calc(var(--top-icon-width) + var(--top-icon2-width));
+}
+
+[data-top-icon=""]:before {
+    font-family: Topvisor;
+}.top-ellipsis {
+	max-height: 100%;
+	text-overflow: ellipsis;
+	overflow: hidden;
+	line-height: 1.23;
+	flex-grow: 1;
+}
+.top-ellipsis2,
+.top-ellipsis3 {
+	max-width: fit-content;
+	display: -webkit-box;
+	-webkit-line-clamp: 2;
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+}
+.top-ellipsis3 {
+	-webkit-line-clamp: 3;
+}/* top-inited используется для блокировки элементов, js к которым еще не привязан, настраивается в каждом модуле отдельно */
+.top-inited {}
+
+.top-hidden {
+	display: none !important;
+}
+
+/* top-unvisible используется для скрытия элементов, без изменения видимости */
+.top-unvisible {
+	width: 0;
+	height: 0;
+	overflow: hidden;
+	position: absolute;
+}
+
+.top-loading {}
+
+.top-disabled {
+	pointer-events: none;
+}
+
+.top-error,
+.top-error::placeholder,
+.top-error:before {
+	--top-forms-border-color: var(--color-negative);
+
+	border-color: var(--color-negative);
+}
+.top-error {
+	--top-icon-color: var(--color-negative);
+
+	color: var(--color-negative);
+}
+.top-error ~ .top-formsCaption {
+	color: var(--color-negative);
+}
+
+.top-warning {
+	--top-icon-color: var(--color-orange-500);
+
+	color: var(--color-orange-500);
+}
+
+input.top-error {
+	animation: top-error 0.8s;
+}
+
+@keyframes top-error {
+	0% {
+		outline-offset: 10px;
+		outline: 3px solid transparent;
+	}
+	50% {
+		outline: 3px solid var(--color-red-100);
+		outline-offset: 2px;
+	}
+	100% {
+		outline: 3px solid transparent;
+		outline-offset: 2px;
+	}
+}@media only screen and (min-width: 900px) {
+	.top-only-mobile {
+		display: none !important;
+	}
+}
+@media only screen and (max-width: 900px) {
+	.top-only-pc {
+		display: none !important;
+	}
+}
+
+html:not([lang="ru"]) .top-only-ru,
+html:not([lang="en"]) .top-only-en {
+	display: none !important;
+}
+
+html[data-is_admin="0"] .top-only-admin {
+	display: none !important;
+}/* TODO: перенести в компонент */
+.top-select_arrow {
+	--top-select_arrow-color: var(--color-gray-600);
+	--top-select_arrow-size: 12px;
+	--top-select_arrow-width: 24px;
+
+	background-image: url("data:image/svg+xml,%3Csvg width='16' height='9' viewBox='0 0 16 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.293 0.29269L8 6.5857L1.70704 0.29269C1.31679 -0.0975633 0.682937 -0.0975633 0.292687 0.29269C-0.0975624 0.682943 -0.0975624 1.31656 0.292687 1.70682L7.29294 8.70713C7.68343 9.09762 8.31657 9.09762 8.70706 8.70713L15.7073 1.70682C16.0976 1.31656 16.0976 0.682943 15.7073 0.29269C15.3171 -0.0975633 14.6832 -0.0975633 14.293 0.29269Z' fill='%23808A99'/%3E%3C/svg%3E");
+	background-size: 14px;
+	background-position: calc(100% - var(--top-forms-padding)) 50%;
+	background-repeat: no-repeat;
+	padding-right: 32px;
+}
+
+.top-select_arrow ~ .top-cleaner {
+	--top-select_arrow-width: 24px;
+}