.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 {
		outline: var(--ds-core-border-width-focus-outline) solid var(--ds-base-outline-color);
		outline-offset: var(--ds-core-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;
		}

	.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;
			-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 .ds-counter {
		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-end: var(--ds-input-large-padding-inline-end);
		padding-inline-start: var(--ds-input-large-padding-inline-start);
		border-radius: var(--ds-input-large-border-radius);
	}

	.ds-input_large .ds-input__inner {
		padding-block-end: var(--ds-input-large-text-padding-block-end);
		padding-block-start: var(--ds-input-large-text-padding-block-start);
		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-counter {
		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-end: var(--ds-input-medium-padding-inline-end);
		padding-inline-start: var(--ds-input-medium-padding-inline-start);
		border-radius: var(--ds-input-medium-border-radius);
	}

	.ds-input_medium .ds-input__inner {
		padding-block-end: var(--ds-input-medium-text-padding-block-end);
		padding-block-start: var(--ds-input-medium-text-padding-block-start);
		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-counter {
		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-start: var(--ds-input-small-padding-inline-start);
		padding-inline-end: var(--ds-input-small-padding-inline-end);
		border-radius: var(--ds-input-small-border-radius);
	}

	.ds-input_small .ds-input__inner {
		padding-block-start: var(--ds-input-small-text-padding-block-start);
		padding-block-end: 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-counter {
		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,.ds-input_error) {
		border-color: var(--ds-input-primary-hover-border-color);
	}

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

	.ds-input_primary.ds-input_focus-from-mouse {
		border-color: var(--ds-input-primary-hover-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-counter {
		color: var(--ds-input-primary-count-color);
	}

	.ds-input_primary .ds-counter_error {
			color: var(--ds-input-error-count-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-scroller {
	height: 100%;
	width: 100%;
	overflow: auto;
	border-radius: inherit;

	scrollbar-width: thin;
	scrollbar-color: var(--ds-scrollbar-default-bg-color) transparent;
}

	.ds-scroller::-webkit-scrollbar {
		width: 9px;
		height: 9px;
	}

	.ds-scroller::-webkit-scrollbar-thumb {
		background: var(--ds-scrollbar-default-bg-color) padding-box;
		width: 3px;
		height: 3px;
		border-radius: 9px;
		border: solid 3px transparent;
	}

	.ds-scroller::-webkit-scrollbar-thumb:hover {
			border: none;
			background: var(--ds-scrollbar-hover-bg-color);
		}

.ds-icon-button {
	box-sizing: border-box;
	display: flex;
	cursor: pointer;
	flex-wrap: nowrap;
	position: relative;
	justify-content: center;
	align-items: center;
	border-width: var(--ds-icon-button-border-width);
	border-style: solid;
	padding: 0;
}

	/* Primary */
	.ds-icon-button_primary {
		fill: var(--ds-icon-button-primary-default-icon-color);
		background-color: var(--ds-icon-button-primary-default-bg-color);
		border-color: var(--ds-icon-button-primary-default-border-color);
	}
	.ds-icon-button_primary:focus-visible {
		border-color: var(--ds-icon-button-primary-focus-border-color);
	}
	.ds-icon-button_primary:hover {
		fill: var(--ds-icon-button-primary-hover-icon-color);
		background-color: var(--ds-icon-button-primary-hover-bg-color);
		border-color: var(--ds-icon-button-primary-hover-border-color);
	}
	.ds-icon-button_primary:active:not(:disabled,.ds-icon-button_loading) {
		fill: var(--ds-icon-button-primary-active-icon-color);
		background-color: var(--ds-icon-button-primary-active-bg-color);
		border-color: var(--ds-icon-button-primary-active-border-color);
	}
	.ds-icon-button_primary:disabled,
	.ds-icon-button_primary.ds-icon-button_disabled,
	.ds-icon-button_primary.ds-icon-button_loading {
		background-color: var(--ds-icon-button-primary-disabled-bg-color);
		border-color: var(--ds-icon-button-primary-disabled-border-color);
		fill: var(--ds-icon-button-primary-disabled-icon-color);
	}
	/* Secondary */
	.ds-icon-button_secondary {
		fill: var(--ds-icon-button-secondary-default-icon-color);
		background-color: var(--ds-icon-button-secondary-default-bg-color);
		border-color: var(--ds-icon-button-secondary-default-border-color);
	}
	.ds-icon-button_secondary:focus-visible {
		border-color: var(--ds-icon-button-secondary-focus-border-color);
	}
	.ds-icon-button_secondary:hover {
		fill: var(--ds-icon-button-secondary-hover-icon-color);
		background-color: var(--ds-icon-button-secondary-hover-bg-color);
		border-color: var(--ds-icon-button-secondary-hover-border-color);
	}
	.ds-icon-button_secondary:active:not(:disabled,.ds-icon-button_loading) {
		fill: var(--ds-icon-button-secondary-active-icon-color);
		background-color: var(--ds-icon-button-secondary-active-bg-color);
		border-color: var(--ds-icon-button-secondary-active-border-color);
	}
	.ds-icon-button_secondary:disabled,
	.ds-icon-button_secondary.ds-icon-button_disabled,
	.ds-icon-button_secondary.ds-icon-button_loading {
		background-color: var(--ds-icon-button-secondary-disabled-bg-color);
		border-color: var(--ds-icon-button-secondary-disabled-border-color);
		fill: var(--ds-icon-button-secondary-disabled-icon-color);
	}
	/* Tertiary */
	.ds-icon-button_tertiary {
		fill: var(--ds-icon-button-tertiary-default-icon-color);
		background-color: var(--ds-icon-button-tertiary-default-bg-color);
		border-color: var(--ds-icon-button-tertiary-default-border-color);
	}
	.ds-icon-button_tertiary:focus-visible {
		border-color: var(--ds-icon-button-tertiary-focus-border-color);
	}
	.ds-icon-button_tertiary:hover {
		fill: var(--ds-icon-button-tertiary-hover-icon-color);
		background-color: var(--ds-icon-button-tertiary-hover-bg-color);
		border-color: var(--ds-icon-button-tertiary-hover-border-color);
	}
	.ds-icon-button_tertiary:active:not(:disabled,.ds-icon-button_loading) {
		fill: var(--ds-icon-button-tertiary-active-icon-color);
		background-color: var(--ds-icon-button-tertiary-active-bg-color);
		border-color: var(--ds-icon-button-tertiary-active-border-color);
	}
	.ds-icon-button_tertiary:disabled,
	.ds-icon-button_tertiary.ds-icon-button_disabled,
	.ds-icon-button_tertiary.ds-icon-button_loading {
		background-color: var(--ds-icon-button-tertiary-disabled-bg-color);
		border-color: var(--ds-icon-button-tertiary-disabled-border-color);
		fill: var(--ds-icon-button-tertiary-disabled-icon-color);
	}
	/* Alt-primary */
	.ds-icon-button_alt-primary {
		fill: var(--ds-icon-button-alt-primary-default-icon-color);
		background-color: var(--ds-icon-button-alt-primary-default-bg-color);
		border-color: var(--ds-icon-button-alt-primary-default-border-color);
	}
	.ds-icon-button_alt-primary:focus-visible {
		border-color: var(--ds-icon-button-alt-primary-focus-border-color);
	}
	.ds-icon-button_alt-primary:hover {
		fill: var(--ds-icon-button-alt-primary-hover-icon-color);
		background-color: var(--ds-icon-button-alt-primary-hover-bg-color);
		border-color: var(--ds-icon-button-alt-primary-hover-border-color);
	}
	.ds-icon-button_alt-primary:active:not(:disabled,.ds-icon-button_loading) {
		fill: var(--ds-icon-button-alt-primary-active-icon-color);
		background-color: var(--ds-icon-button-alt-primary-active-bg-color);
		border-color: var(--ds-icon-button-alt-primary-active-border-color);
	}
	.ds-icon-button_alt-primary:disabled,
	.ds-icon-button_alt-primary.ds-icon-button_disabled,
	.ds-icon-button_alt-primary.ds-icon-button_loading {
		background-color: var(--ds-icon-button-alt-primary-disabled-bg-color);
		border-color: var(--ds-icon-button-alt-primary-disabled-border-color);
		fill: var(--ds-icon-button-alt-primary-disabled-icon-color);
	}
	/* Alt-secondary */
	.ds-icon-button_alt-secondary {
		fill: var(--ds-icon-button-alt-secondary-default-icon-color);
		background-color: var(--ds-icon-button-alt-secondary-default-bg-color);
		border-color: var(--ds-icon-button-alt-secondary-default-border-color);
	}
	.ds-icon-button_alt-secondary:focus-visible {
		border-color: var(--ds-icon-button-alt-secondary-focus-border-color);
	}
	.ds-icon-button_alt-secondary:hover {
		fill: var(--ds-icon-button-alt-secondary-hover-icon-color);
		background-color: var(--ds-icon-button-alt-secondary-hover-bg-color);
		border-color: var(--ds-icon-button-alt-secondary-hover-border-color);
	}
	.ds-icon-button_alt-secondary:active:not(:disabled,.ds-icon-button_loading) {
		fill: var(--ds-icon-button-alt-secondary-active-icon-color);
		background-color: var(--ds-icon-button-alt-secondary-active-bg-color);
		border-color: var(--ds-icon-button-alt-secondary-active-border-color);
	}
	.ds-icon-button_alt-secondary:disabled,
	.ds-icon-button_alt-secondary.ds-icon-button_disabled,
	.ds-icon-button_alt-secondary.ds-icon-button_loading {
		background-color: var(--ds-icon-button-alt-secondary-disabled-bg-color);
		border-color: var(--ds-icon-button-alt-secondary-disabled-border-color);
		fill: var(--ds-icon-button-alt-secondary-disabled-icon-color);
	}
	/* Danger */
	.ds-icon-button_danger {
		fill: var(--ds-icon-button-danger-default-icon-color);
		background-color: var(--ds-icon-button-danger-default-bg-color);
		border-color: var(--ds-icon-button-danger-default-border-color);
	}
	.ds-icon-button_danger:focus-visible {
		border-color: var(--ds-icon-button-danger-focus-border-color);
	}
	.ds-icon-button_danger:hover {
		fill: var(--ds-icon-button-danger-hover-icon-color);
		background-color: var(--ds-icon-button-danger-hover-bg-color);
		border-color: var(--ds-icon-button-danger-hover-border-color);
	}
	.ds-icon-button_danger:active:not(:disabled,.ds-icon-button_loading) {
		fill: var(--ds-icon-button-danger-active-icon-color);
		background-color: var(--ds-icon-button-danger-active-bg-color);
		border-color: var(--ds-icon-button-danger-active-border-color);
	}
	.ds-icon-button_danger:disabled,
	.ds-icon-button_danger.ds-icon-button_disabled,
	.ds-icon-button_danger.ds-icon-button_loading {
		background-color: var(--ds-icon-button-danger-disabled-bg-color);
		border-color: var(--ds-icon-button-danger-disabled-border-color);
		fill: var(--ds-icon-button-danger-disabled-icon-color);
	}
	/* Success */
	.ds-icon-button_success {
		fill: var(--ds-icon-button-success-default-icon-color);
		background-color: var(--ds-icon-button-success-default-bg-color);
		border-color: var(--ds-icon-button-success-default-border-color);
	}
	.ds-icon-button_success:focus-visible {
		border-color: var(--ds-icon-button-success-focus-border-color);
	}
	.ds-icon-button_success:hover {
		fill: var(--ds-icon-button-success-hover-icon-color);
		background-color: var(--ds-icon-button-success-hover-bg-color);
		border-color: var(--ds-icon-button-success-hover-border-color);
	}
	.ds-icon-button_success:active:not(:disabled,.ds-icon-button_loading) {
		fill: var(--ds-icon-button-success-active-icon-color);
		background-color: var(--ds-icon-button-success-active-bg-color);
		border-color: var(--ds-icon-button-success-active-border-color);
	}
	.ds-icon-button_success:disabled,
	.ds-icon-button_success.ds-icon-button_disabled,
	.ds-icon-button_success.ds-icon-button_loading {
		background-color: var(--ds-icon-button-success-disabled-bg-color);
		border-color: var(--ds-icon-button-success-disabled-border-color);
		fill: var(--ds-icon-button-success-disabled-icon-color);
	}
	/* Sizes */
	.ds-icon-button_xsmall {
		min-inline-size: var(--ds-icon-button-size-xsmall);
		block-size: var(--ds-icon-button-size-xsmall);
		border-radius: var(--ds-icon-button-xsmall-border-radius);
	}
	.ds-icon-button_small {
		min-inline-size: var(--ds-icon-button-size-small);
		block-size: var(--ds-icon-button-size-small);
		border-radius: var(--ds-icon-button-small-border-radius);
	}
	.ds-icon-button_medium {
		min-inline-size: var(--ds-icon-button-size-medium);
		block-size: var(--ds-icon-button-size-medium);
		border-radius: var(--ds-icon-button-medium-border-radius);
	}
	.ds-icon-button_large {
		min-inline-size: var(--ds-icon-button-size-large);
		block-size: var(--ds-icon-button-size-large);
		border-radius: var(--ds-icon-button-large-border-radius);
	}
	.ds-icon-button_xlarge {
		min-inline-size: var(--ds-icon-button-size-xlarge);
		block-size: var(--ds-icon-button-size-xlarge);
		border-radius: var(--ds-icon-button-xlarge-border-radius);
	}
	.ds-icon-button_disable,
	.ds-icon-button:disabled {
		cursor: not-allowed;
	}
	.ds-icon-button_loading {
		cursor: wait;
	}
	.ds-icon-button:focus-visible {
		outline: var(--ds-core-border-width-focus-outline) solid var(--ds-base-outline-color);
		outline-offset: var(--ds-core-outline-offset);
	}
	.ds-icon-button:focus:not(:focus-visible) {
		outline: none;
	}
	.ds-icon-button:active:not(:disabled,.ds-icon-button_disabled,.ds-icon-button_loading) {
		transform: translateY(var(--ds-core-down-click-effect));
	}

.ds-focusable-button:focus-visible {
		outline: var(--ds-core-border-width-focus-outline) solid var(--ds-base-outline-color);
		outline-offset: var(--ds-core-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: 1000;
	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-start: var(--ds-tooltip-block-start);
	padding-block-end: 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;
			}