.ds-input {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	box-sizing: border-box;
	border-width: var(--ds-input-border-width);
	border-style: solid;
	inline-size: 100%;

}

	.ds-input_focus-from-keyboard,
	.ds-input_focus-from-mouse  {
		outline: var(--ds-common-border-width-focus-outline) solid var(--ds-common-outline-color);
		outline-offset: var(--ds-common-outline-offset);
	}

	.ds-input_disabled {
		cursor: not-allowed;
	}

	.ds-input__inner {
		display: flex;
		height: 100%;
		width: 100%;
		flex-grow: 1;
		background: transparent;
		-webkit-appearance: none;
		   -moz-appearance: none;
		        appearance: none;
		border: none;
		font-family: var(--ds-input-font-family), sans-serif;
	}

	.ds-input__inner:focus,
		.ds-input__inner:focus-visible {
			outline: none; /* because we have pseudo-class _focus-from-mouse, _focus-from-keyboard */
		}

	.ds-input__inner:disabled {
			cursor: not-allowed;
		}

	/* workaround to hide "clear" and "reveal password" buttons in MS Edge */

	.ds-input__inner::-ms-reveal,
		.ds-input__inner::-ms-clear {
			display: none;
		}

	/* workaround to suppress ugly background in autocompleted inputs, see FE-398 */

	.ds-input__inner:-webkit-autofill,
		.ds-input__inner:-webkit-autofill:hover,
		.ds-input__inner:-webkit-autofill:focus,
		.ds-input__inner:-webkit-autofill:active,
		.ds-input__inner:-webkit-autofill::first-line {
			-webkit-background-clip: text;
			        background-clip: text;
			-webkit-text-fill-color: var(--ds-input-primary-default-text-color);
			caret-color: var(--ds-input-primary-default-text-color);
			font-family: var(--ds-input-font-family), sans-serif;
		}

	.ds-input__error-icon {
		flex-shrink: 0;
		fill: var(--ds-danger-icon-default-icon-color);
	}

	.ds-input__addons {
		display: flex;
		align-items: center;
		flex-shrink: 0;
	}

	.ds-input__addon {
		flex-shrink: 0;
	}

	.ds-input__addon_hover-show {
			display: none;
		}

	.ds-input_large {
		min-inline-size: var(--ds-input-large-min-width);
		block-size: var(--ds-input-large-height);
		gap: var(--ds-input-large-gap);
		padding-inline: var(--ds-input-large-padding-inline-start) var(--ds-input-large-padding-inline-end);
		border-radius: var(--ds-input-large-border-radius);
	}

	.ds-input_large .ds-input__inner {
		padding-block: var(--ds-input-large-text-padding-block-start) var(--ds-input-large-text-padding-block-end);
		font-size: var(--ds-input-large-font-size);
		font-weight: var(--ds-input-large-font-weight);
		line-height: var(--ds-input-large-line-height);
	}

	.ds-input_large .ds-input__addons {
		gap: var(--ds-input-large-suffix-gap);
	}

	.ds-input_medium {
		min-inline-size: var(--ds-input-medium-min-width);
		block-size: var(--ds-input-medium-height);
		gap: var(--ds-input-medium-gap);
		padding-inline: var(--ds-input-medium-padding-inline-start) var(--ds-input-medium-padding-inline-end);
		border-radius: var(--ds-input-medium-border-radius);
	}

	.ds-input_medium .ds-input__inner {
		padding-block: var(--ds-input-medium-text-padding-block-start) var(--ds-input-medium-text-padding-block-end);
		font-size: var(--ds-input-medium-font-size);
		font-weight: var(--ds-input-medium-font-weight);
		line-height: var(--ds-input-medium-line-height);
	}

	.ds-input_medium .ds-input__addons {
		gap: var(--ds-input-medium-suffix-gap);
	}

	.ds-input_small {
		min-inline-size: var(--ds-input-small-min-width);
		block-size: var(--ds-input-small-height);
		gap: var(--ds-input-small-gap);
		padding-inline: var(--ds-input-small-padding-inline-start) var(--ds-input-small-padding-inline-end);
		border-radius: var(--ds-input-small-border-radius);
	}

	.ds-input_small .ds-input__inner {
		padding-block: var(--ds-input-small-text-padding-block-start) var(--ds-input-small-text-padding-block-end);
		font-size: var(--ds-input-small-font-size);
		font-weight: var(--ds-input-small-font-weight);
		line-height: var(--ds-input-small-line-height);
	}

	.ds-input_small .ds-input__addons {
		gap: var(--ds-input-small-suffix-gap);
	}

	.ds-input_primary {
		background: var(--ds-input-primary-default-bg-color);
		border-color: var(--ds-input-primary-default-border-color);
	}

	.ds-input_primary:hover:not(.ds-input_disabled) {
		background-color: var(--ds-input-primary-hover-bg-color);
	}

	.ds-input_primary:hover:not(.ds-input_disabled,.ds-input_error) {
		border-color: var(--ds-input-primary-hover-border-color);
		background-color: var(--ds-input-primary-hover-bg-color);
	}

	.ds-input_primary.ds-input_focus-from-keyboard {
		border-color: var(--ds-input-primary-focus-border-color);
		background: var(--ds-input-primary-focus-bg-color);
	}

	.ds-input_primary.ds-input_focus-from-mouse {
		border-color: var(--ds-input-primary-focus-border-color);
		background: var(--ds-input-primary-focus-bg-color);
	}

	.ds-input_primary .ds-input__inner {
		color: var(--ds-input-primary-default-text-color);
	}

	.ds-input_primary .ds-input__inner::-moz-placeholder {
		color: var(--ds-input-primary-default-placeholder-color);
	}

	.ds-input_primary .ds-input__inner::placeholder {
		color: var(--ds-input-primary-default-placeholder-color);
	}

	.ds-input_primary.ds-input_disabled {
		border-color: var(--ds-input-primary-disabled-border-color);
		background: var(--ds-input-primary-disabled-bg-color);
	}

	.ds-input_primary.ds-input_disabled .ds-input__inner {
		color: var(--ds-input-primary-disabled-text-color);
	}

	.ds-input_primary.ds-input_disabled .ds-input__inner::-moz-placeholder {
		color: var(--ds-input-primary-disabled-placeholder-color);
	}

	.ds-input_primary.ds-input_disabled .ds-input__inner::placeholder {
		color: var(--ds-input-primary-disabled-placeholder-color);
	}

	.ds-input_primary .ds-input__clear:active {
		fill: var(--ds-icon-button-alt-primary-hover-icon-color);
	}

	.ds-input_primary .ds-input__toggle-pwd:active {
		fill: var(--ds-icon-button-alt-primary-hover-icon-color);
	}

	.ds-input_error,
	.ds-input_focus-from-keyboard.ds-input_error,
	.ds-input_focus-from-mouse.ds-input_error {
		border-color: var(--ds-input-error-border-color);
	}

	.ds-input:hover .ds-input__addon_hover-show {
			display: flex;
		}

	.ds-input:hover .ds-input__addon_hover-hide {
			display: none;
		}

	.ds-input_primary.ds-input_focus-from-keyboard .ds-input__inner::-moz-placeholder, .ds-input_primary.ds-input_focus-from-mouse .ds-input__inner::-moz-placeholder {
		color: var(--ds-input-primary-focus-placeholder-color);
	}

	.ds-input_primary.ds-input_focus-from-keyboard .ds-input__inner::placeholder,
	.ds-input_primary.ds-input_focus-from-mouse .ds-input__inner::placeholder {
		color: var(--ds-input-primary-focus-placeholder-color);
	}

.ds-scroller_overlay {
	box-sizing: border-box;
	max-width: 100%;
	max-height: 100%;
}

	.ds-scroller_overlay .os-scrollbar {
		--os-size: var(--ds-scrollbar-hover-width);
		--os-handle-perpendicular-size: var(--ds-scrollbar-default-width);
		--os-handle-bg: var(--ds-scrollbar-default-bg-color);
		--os-handle-bg-hover: var(--ds-scrollbar-hover-bg-color);
		--os-handle-bg-active: var(--ds-scrollbar-hover-bg-color);
		--os-padding-perpendicular: 0;
		--os-handle-min-size: var(--ds-scrollbar-min-height);
		--os-handle-border-radius: var(--ds-scrollbar-border-radius);
	}

	.ds-scroller_overlay .os-scrollbar-vertical .os-scrollbar-handle {
		right: calc((var(--ds-scrollbar-hover-width) + 1px) / 2);
		translate: 50% 0;
	}

	.ds-scroller_overlay .os-scrollbar-horizontal .os-scrollbar-handle {
		bottom: calc((var(--ds-scrollbar-hover-width) + 1px) / 2);
		translate: 0 50%;
	}

.ds-loader_default-color {
		stroke: var(--ds-loader-primary-default-bg-color);
	}
	.ds-loader_default-secondary-color {
		stroke: var(--ds-loader-primary-default-spinner-color);
	}

.ds-scroller_default {
	box-sizing: border-box;
	max-height: 100%;
	max-width: 100%;
	overflow: auto;
	border-radius: inherit;
}

@supports not(selector(::-webkit-scrollbar)) {
	.ds-scroller_default {
		scrollbar-width: thin;
		scrollbar-color: var(--ds-scrollbar-default-bg-color) transparent;
	}
}

@supports selector(::-webkit-scrollbar) {
		.ds-scroller_default::-webkit-scrollbar {
			width: var(--ds-scrollbar-hover-width);
			height: var(--ds-scrollbar-hover-width);
		}

		.ds-scroller_default::-webkit-scrollbar-thumb {
			background: var(--ds-scrollbar-default-bg-color) padding-box;
			width: var(--ds-scrollbar-default-width);
			height: var(--ds-scrollbar-default-width);
			border-radius: var(--ds-scrollbar-border-radius);
			border: solid calc((var(--ds-scrollbar-hover-width) - var(--ds-scrollbar-default-width)) / 2) transparent;
		}

			.ds-scroller_default::-webkit-scrollbar-thumb:hover {
				border-width: 0;
				background: var(--ds-scrollbar-hover-bg-color);
			}
}
.ds-character-counter {
	font-family: var(--ds-character-counter-font-family), sans-serif;
}

	.ds-character-counter_primary {
		color: var(--ds-character-counter-primary-count-color);
	}

	.ds-character-counter_primary.ds-character-counter_negative {
		color: var(--ds-character-counter-primary-negative-count-color);
	}

	.ds-character-counter_large {
		font-weight: var(--ds-character-counter-large-font-weight);
		font-size: var(--ds-character-counter-large-font-size);
		line-height: var(--ds-character-counter-large-line-height);
	}

	.ds-character-counter_medium {
		font-weight: var(--ds-character-counter-medium-font-weight);
		font-size: var(--ds-character-counter-medium-font-size);
		line-height: var(--ds-character-counter-medium-line-height);
	}

	.ds-character-counter_small {
		font-weight: var(--ds-character-counter-small-font-weight);
		font-size: var(--ds-character-counter-small-font-size);
		line-height: var(--ds-character-counter-small-line-height);
	}
.ds-embed-icon-button {
	box-sizing: border-box;
	display: flex;
	cursor: pointer;
	flex-wrap: nowrap;
	position: relative;
	justify-content: center;
	align-items: center;
	padding: 0;
	border: none;
	background: none;
	fill: var(--ds-embed-icon-button-default-icon-color);
}

	.ds-embed-icon-button:hover {
		fill: var(--ds-embed-icon-button-hover-icon-color);
	}

	.ds-embed-icon-button:active:not(:disabled) {
		fill: var(--ds-embed-icon-button-active-icon-color);
	}

	.ds-embed-icon-button:disabled,
	.ds-embed-icon-button_disabled {
		cursor: not-allowed;
		fill: var(--ds-embed-icon-button-disabled-icon-color);
	}

	/* Sizes */

	.ds-embed-icon-button_small {
		min-inline-size: var(--ds-embed-icon-button-small-size);
		block-size: var(--ds-embed-icon-button-small-size);
	}

	.ds-embed-icon-button_medium {
		min-inline-size: var(--ds-embed-icon-button-medium-size);
		block-size: var(--ds-embed-icon-button-medium-size);
	}

	.ds-embed-icon-button_large {
		min-inline-size: var(--ds-embed-icon-button-large-size);
		block-size: var(--ds-embed-icon-button-large-size);
	}

.ds-focusable-button:focus-visible {
		outline: var(--ds-common-border-width-focus-outline) solid var(--ds-common-outline-color);
		outline-offset: var(--ds-common-outline-offset);
	}
	.ds-focusable-button:focus:not(:focus-visible) {
		outline: none;
	}
	.ds-focusable-button:active:not(:disabled,.ds-focusable-button_disabled,.ds-focusable-button_loading) {
		transform: translateY(var(--ds-core-down-click-effect));
	}
	.ds-focusable-button_disabled,
	.ds-focusable-button:disabled {
		cursor: not-allowed;
	}
	.ds-focusable-button_loading {
		cursor: wait;
	}

.ds-tooltip {
	z-index: var(--ds-tooltip-z-index);
	font-family: var(--ds-tooltip-font-family), serif;
	min-block-size: var(--ds-tooltip-min-height);
	max-inline-size: var(--ds-tooltip-max-width);
	padding-inline: var(--ds-tooltip-inline-padding);
	padding-block: var(--ds-tooltip-block-start) var(--ds-tooltip-block-end);
	pointer-events: none;
	font-size: var(--ds-tooltip-font-size);
	font-weight: var(--ds-tooltip-font-width);
	line-height: var(--ds-tooltip-line-height);
	box-sizing: border-box;
	box-shadow: var(--ds-tooltip-drop-shadow);
	border-width: var(--ds-tooltip-border-width);
	border-style: solid;
	border-radius: var(--ds-tooltip-border-radius);
	text-align: start;
}

	.ds-tooltip_standard {
		background: var(--ds-tooltip-standard-bg-color);
		border-color: var(--ds-tooltip-standard-border-color);
		color: var(--ds-tooltip-standard-text-color);
	}

	.ds-tooltip_info {
		background: var(--ds-tooltip-info-bg-color);
		border-color: var(--ds-tooltip-info-border-color);
		color: var(--ds-tooltip-info-text-color);
	}

	.ds-tooltip_error {
		background: var(--ds-tooltip-error-bg-color);
		border-color: var(--ds-tooltip-error-border-color);
		color: var(--ds-tooltip-error-text-color);
	}

	.ds-tooltip > ul {
		list-style: none;
		padding: 0;
		margin: 0;
	}

	.ds-tooltip > ul > li {
			padding-left: 10px;
			position: relative;
		}

	.ds-tooltip > ul > li::before {
				content: '•';
				position: absolute;
				top: 0;
				left: 0;
			}