@st-namespace 'Dropdown-st-css';
@st-import [ --wix-color-5, --wix-color-4, --wix-color-29, --wix-color-1, --wix-color-37 ] from '@wix/tpa-style-webpack-plugin/stylable-variables.st.css';
@st-import [ createColor, createFont, createVar, setColor, setFont, setVar, createFontWithOverrides ] from '../../common/formatters.st';
@st-import [ errorColor, errorColor-rgb ] from '../../common/palette.st.css';
@st-import Dropdown from '../internal/WixUiCoreComponents/components/CoreDropdown/CoreDropdown.st.css';
@st-import Divider from '../internal/WixUiCoreComponents/components/CoreDivider/CoreDivider.st.css';
@st-import ErrorMessageWrapper from '../internal/ErrorMessageWrapper/ErrorMessageWrapper.st.css';
@st-import IconTooltip from '../IconTooltip/IconTooltip.st.css';
@st-import DropdownBase from './DropdownBase.st.css';
@st-import DropdownNativeSelect from './DropdownNativeSelect.st.css';
@st-import DropdownOption from './DropdownOption.st.css';
@st-import [
  --wix-ui-tpa-dropdown-main-button-text-color,
  --wix-ui-tpa-dropdown-main-text-font,
  --wix-ui-tpa-dropdown-readonly-button-text-font
  --wix-ui-tpa-dropdown-main-label-font,

  --wix-ui-tpa-dropdown-main-border-radius,
  --wix-ui-tpa-dropdown-hover-border-radius,
  --wix-ui-tpa-dropdown-readonly-button-border-radius,

  --wix-ui-tpa-dropdown-main-button-border-color,
  --wix-ui-tpa-dropdown-hover-border-color,

  --wix-ui-tpa-dropdown-main-border-width,
  --wix-ui-tpa-dropdown-hover-border-width,

  --wix-ui-tpa-dropdown-hover-background-color,
  --wix-ui-tpa-dropdown-hover-background-opacity,
  --wix-ui-tpa-dropdown-hover-text-color,
  --wix-ui-tpa-dropdown-readonly-button-border-color,
] from "./Dropdown.styleApi.st.css";

@st-import [
  --wst-system-error-color-rgb,
  --wst-shade-3-color-rgb,
  --wst-primary-background-color-rgb,
  --wst-paragraph-2-color-rgb,
  --wst-system-disabled-color-rgb
] from '@wix/wix-site-theme-variables/stylable-variables.st.css';

@property st-global(--wut-error-color);

/*
 * The disabled button’s text color
 * @type color
 * @default 0
 */
@property st-global(--wix-ui-tpa-dropdown-main-button-text-disabled-color);
/*
 * The disabled button's border color
 * @type color
 * @default --wix-color-29
 */
@property st-global(--wix-ui-tpa-dropdown-main-border-disabled-color);
/*
 * The button's background color
 * @type color
 * @default --wix-color-1
 */
@property st-global(--wix-ui-tpa-dropdown-main-background-color);
/*
 * The button's placeholder color
 * @type color
 * @default --wix-color-4
 */
@property st-global(--wix-ui-tpa-dropdown-main-placeholder-color);
/*
 * The button's placeholder font
 * @type font
 * @default "preset: 'Body-M' | overrides: { size: '16px'}"
 */
@property st-global(--wix-ui-tpa-dropdown-main-placeholder-font);
/*
 * Dropdown's background color
 * @type color
 * @default --wix-color-1
 */
@property st-global(--wix-ui-tpa-dropdown-main-dropdown-background-color);
/*
 * Item text color
 * @type color
 * @default --wix-color-5
 */
@property st-global(--wix-ui-tpa-dropdown-main-item-text-color);
/*
 * Item text font
 * @type font
 * @default "preset: 'Body-M' | overrides: { size: '16px'}"
 */
@property st-global(--wix-ui-tpa-dropdown-main-item-text-font);
/*
 * Item text disabled color
 * @type color
 * @default --wix-color-29
 */
@property st-global(--wix-ui-tpa-dropdown-main-item-text-disabled-color);
/*
 * Label color
 * @type color
 * @default --wix-color-5
 */
@property st-global(--wix-ui-tpa-dropdown-main-label-color);
/*
 * Dropdown height
 * @type size
 * @default 42px
 */
@property st-global(--wix-ui-tpa-dropdown-main-dropdown-height);
/*
 * The color representing an error
 * @type color
 * @default #DF3131
 */
@property st-global(--wix-ui-tpa-dropdown-error-color);
/*
 * A minimum height for the error message element
 * @type size
 */
@property st-global(--wix-ui-tpa-dropdown-error-message-min-height);
/*
 * Border opacity
 * @type size
 * @default 0.6
 */
@property st-global(--wix-ui-tpa-dropdown-main-border-opacity);
/*
 * Dropdown container menu vertical padding
 * @type size
 * @default 12px
 */
@property st-global(--wix-ui-tpa-dropdown-content-vertical-padding);
/*
 * Dropdown container menu horizontal padding
 * @type size
 * @default 0
 */
@property st-global(--wix-ui-tpa-dropdown-content-horizontal-padding);
/*
 * Spacing between icon and text
 * @type size
 * @default 4px
 */
@property st-global(--wix-ui-tpa-dropdown-main-column-gap);
/*
 * The readonly button's background color
 * @type color
 * @default --wix-color-1
 */
@property st-global(--wix-ui-tpa-dropdown-readonly-button-background-color);
/*
 * The readonly button's border width
 * @type size
 * @default 1px
 */
@property st-global(--wix-ui-tpa-dropdown-readonly-button-border-width);
/*
 * The readonly button’s text color
 * @type color
 * @default --wix-color-5
 */
@property st-global(--wix-ui-tpa-dropdown-readonly-button-text-color);
/*
 * The readonly button's icon color
 * @type color
 * @default --wix-color-5 with 20% opacity
 */
@property st-global(--wix-ui-tpa-dropdown-readonly-icon-color);
/*
 * The readonly button's icon size
 * @type size
 * @default 24
 */
@property st-global(--wix-ui-tpa-dropdown-readonly-icon-size);
/*
 * Readonly label text font
 * @type font
 * @default "preset: 'Body-M' | overrides: { size: '14px'}"
 */
@property st-global(--wix-ui-tpa-dropdown-readonly-label-font);
/*
 * Readonly label color
 * @type color
 * @default --wix-color-5
 */
@property st-global(--wix-ui-tpa-dropdown-readonly-label-color);
/*
 * Readonly button's placeholder color
 * @type color
 * @default --wix-color-4
 */
@property st-global(--wix-ui-tpa-dropdown-readonly-button-placeholder-color);
/*
 * Readonly button's placeholder font
 * @type font
 * @default "preset: 'Body-M' | overrides: { size: '16px'}"
 */
@property st-global(--wix-ui-tpa-dropdown-readonly-button-placeholder-font);

.root {
  -st-states: alignment(enum(center)), mobile, error, theme(enum(line, box)), rtl, newErrorMessage, outerBorder, readOnly;
  -st-mixin:
    setColor(--wix-ui-tpa-dropdown-native-select-main-button-text-color, --wix-ui-tpa-dropdown-main-button-text-color, var(--wst-paragraph-2-color-rgb, var(--wix-color-5))),
    setColor(--wix-ui-tpa-dropdown-native-select-main-button-text-disabled-color, --wix-ui-tpa-dropdown-main-button-text-disabled-color, var(--wst-system-disabled-color-rgb, var(--wix-color-29))),
    setColor(--wix-ui-tpa-dropdown-native-select-main-border-disabled-color, --wix-ui-tpa-dropdown-main-border-disabled-color, var(--wst-system-disabled-color-rgb, var(--wix-color-29))),
    setColor(--wix-ui-tpa-dropdown-native-select-main-background-color, --wix-ui-tpa-dropdown-main-background-color, var(--wst-primary-background-color-rgb, var(--wix-color-1))),
    setVar(--wix-ui-tpa-button-column-gap, --wix-ui-tpa-dropdown-main-column-gap);
}

.root:readOnly {
  -st-mixin:
    setColor(--wix-ui-tpa-dropdown-native-select-readonly-button-text-color, --wix-ui-tpa-dropdown-readonly-button-text-color, var(--wix-color-5)),
    setColor(--wix-ui-tpa-dropdown-native-select-readonly-button-icon-color, --wix-ui-tpa-dropdown-readonly-icon-color, var(--wix-color-5), 0.2),
    setVar(--wix-ui-tpa-dropdown-native-select-readonly-button-icon-size, --wix-ui-tpa-dropdown-readonly-icon-size, null, 24px),
    setVar(--wix-ui-tpa-dropdown-native-select-readonly-button-border-width, --wix-ui-tpa-dropdown-readonly-button-border-width, null, 1px),
    setColor(--wix-ui-tpa-dropdown-native-select-readonly-button-background-color, --wix-ui-tpa-dropdown-readonly-button-background-color, var(--wix-color-1)),
    setColor(--wix-ui-tpa-dropdown-native-select-readonly-placeholder-color, --wix-ui-tpa-dropdown-readonly-button-placeholder-color, var(--wix-color-4));
}

.label {
  color: createColor(--wix-ui-tpa-dropdown-main-label-color, var(--wst-paragraph-2-color, var(--wix-color-5)));
  -st-mixin: createFontWithOverrides(--wst-paragraph-2-overriden-font, --wst-paragraph-2, '{ "size": "14px" }'),
  createFont((--wix-ui-tpa-dropdown-main-label-font, --wst-paragraph-2-overriden-font), 'Body-M');
  display: block;
  margin-bottom: 8px;
}

.root:readOnly .label {
  -st-mixin: createFontWithOverrides(--wst-paragraph-2-overriden-font, --wst-paragraph-2, '{ "size": "14px" }'),
  createFont((--wix-ui-tpa-dropdown-readonly-label-font, --wst-paragraph-2-overriden-font), 'Body-M');
  color: createColor(--wix-ui-tpa-dropdown-readonly-label-color, var(--wix-color-5));
}

.root:mobile .label {
  -st-mixin: createFontWithOverrides(--wst-paragraph-2-overriden-font, --wst-paragraph-2, '{ "size": "12px" }'),
  createFont((--wix-ui-tpa-dropdown-main-label-font, --wst-paragraph-2-overriden-font), 'Body-M');
}

.root:mobile:readOnly .label {
  -st-mixin: createFontWithOverrides(--wst-paragraph-2-overriden-font, --wst-paragraph-2, '{ "size": "12px" }'),
  createFont((--wix-ui-tpa-dropdown-readonly-label-font, --wst-paragraph-2-overriden-font), 'Body-M');
}

.dropdownBase {
  -st-extends: DropdownBase;
}

.dropdownOption {
  -st-extends: DropdownOption;
  -st-mixin: createFontWithOverrides(--wst-paragraph-2-overriden-font, --wst-paragraph-2, '{ "size": "16px", "line-height": "1.5em" }'),
  setFont(--wix-ui-tpa-dropdown-option-main-title-text-font, (--wix-ui-tpa-dropdown-main-item-text-font, --wix-ui-tpa-dropdown-main-text-font, --wst-paragraph-2-overriden-font), 'Body-M'),
  setColor(--wix-ui-tpa-dropdown-option-main-title-text-color, --wix-ui-tpa-dropdown-main-item-text-color, var(--wst-paragraph-2-color-rgb, var(--wix-color-5))),
  setColor(--wix-ui-tpa-dropdown-option-main-item-text-disabled-color, --wix-ui-tpa-dropdown-main-item-text-disabled-color, var(--wix-color-29));
}

.dropdownNativeSelect {
  -st-extends: DropdownNativeSelect;
}

.dropdownError {
  -st-extends: IconTooltip;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}

.root:rtl .dropdownError {
  left: 32px;
}

.root:not(:rtl) .dropdownError {
  right: 32px;
}

.errorIcon {
  color: value(errorColor);
}

.dropdown {
  -st-extends: Dropdown;
  width: 100%;
}

.dropdown,
.dropdownBase,
.dropdownNativeSelect {
  min-width: 68px;
  height: var(--wix-ui-tpa-dropdown-main-dropdown-height, 42px);
}

.dropdownNativeSelect:icon {
  padding: 8px 40px;
}

.dropdownNativeSelect:error {
  border-color: rgb(var(--wst-system-error-color-rgb, value(errorColor-rgb)));
}

.dropdown .dropdownBase {
  color: createColor(--wix-ui-tpa-dropdown-main-button-text-color, var(--wst-paragraph-2-color-rgb, var(--wix-color-5))) !important;
  border-width: var(--wix-ui-tpa-dropdown-main-border-width, 1px) !important;
  border-radius: var(--wix-ui-tpa-dropdown-main-border-radius, 0) !important;
  background: createColor(--wix-ui-tpa-dropdown-main-background-color, var(--wst-primary-background-color-rgb, var(--wix-color-1))) !important;
  -st-mixin: createFontWithOverrides(--wst-paragraph-2-overriden-font, --wst-paragraph-2, '{ "size": "16px", "line-height": "1.5em" }'),
  setFont(--wix-ui-tpa-button-main-text-font, (--wix-ui-tpa-dropdown-main-text-font, --wst-paragraph-2-overriden-font), 'Body-M');
}

.dropdown .dropdownBase:not(:error) {
  border-color: createColor(--wix-ui-tpa-dropdown-main-button-border-color, var(--wst-paragraph-2-color-rgb, var(--wix-color-5)), var(--wix-ui-tpa-dropdown-main-border-opacity, 0.6)) !important;
}

.root:not(:readOnly) .dropdown .dropdownBase:not(:error):not(:disabled):focus-within,
.root:not(:readOnly) .dropdown .dropdownBase:not(:error):not(:disabled):hover {
  border-color: createColor((--wix-ui-tpa-dropdown-hover-border-color, --wix-ui-tpa-dropdown-main-button-border-color), var(--wix-color-5), 1) !important;
  background-color: createColor((--wix-ui-tpa-dropdown-hover-background-color, --wix-ui-tpa-dropdown-main-background-color), var(--wix-color-1), var(--wix-ui-tpa-dropdown-hover-background-opacity, 1)) !important;
  color: createColor((--wix-ui-tpa-dropdown-hover-text-color, --wix-ui-tpa-dropdown-main-button-text-color), var(--wix-color-5)) !important;
  border-width: var(--wix-ui-tpa-dropdown-hover-border-width, var(--wix-ui-tpa-dropdown-main-border-width, 1px)) !important;
  border-radius: var(--wix-ui-tpa-dropdown-hover-border-radius, var(--wix-ui-tpa-dropdown-main-border-radius)) !important;
}

.dropdown .dropdownBase:not(:error):focus-within::arrowIcon,
.dropdown .dropdownBase:not(:error):hover::arrowIcon {
  color: createColor((--wix-ui-tpa-dropdown-hover-text-color, --wix-ui-tpa-dropdown-main-button-text-color), var(--wix-color-5)) !important;
}

.root:readOnly .dropdown .dropdownBase {
  cursor: default;
  color: createColor(--wix-ui-tpa-dropdown-readonly-button-text-color, var(--wix-color-5)) !important;
  border-color: createColor(--wix-ui-tpa-dropdown-readonly-button-border-color, (var(--wix-color-5), 0.2)) !important;
  border-width: var(--wix-ui-tpa-dropdown-readonly-button-border-width, 1px) !important;
  border-radius: var(--wix-ui-tpa-dropdown-readonly-button-border-radius, 0) !important;
  background-color: createColor(--wix-ui-tpa-dropdown-readonly-button-background-color, var(--wix-color-1)) !important;
  -st-mixin: createFontWithOverrides(--wst-paragraph-2-overriden-font, --wst-paragraph-2, '{ "size": "16px", "line-height": "1.5em" }'),
  createFont((--wix-ui-tpa-dropdown-readonly-button-text-font, --wst-paragraph-2-overriden-font), 'Body-M') !important;
}

.dropdown .dropdownBase::arrowIcon {
  color: createColor(--wix-ui-tpa-dropdown-main-button-text-color, var(--wst-paragraph-2-color-rgb, var(--wix-color-5))) !important;
}

.dropdown .dropdownBase:disabled::affixIcon svg[fill="currentColor"] {
  color: createColor(--wix-ui-tpa-dropdown-main-button-text-disabled-color, var(--wst-system-disabled-color-rgb, var(--wix-color-29))) !important;
}

.dropdown .dropdownBase::affixIcon svg[fill="currentColor"] {
  color: createColor(--wix-ui-tpa-dropdown-main-button-text-color, var(--wst-paragraph-2-color-rgb, var(--wix-color-5))) !important;
}

.dropdown .dropdownBase:disabled {
  color: createColor(--wix-ui-tpa-dropdown-main-button-text-disabled-color, var(--wst-system-disabled-color-rgb, var(--wix-color-29))) !important;
  border-color: createColor(--wix-ui-tpa-dropdown-main-border-disabled-color, var(--wst-system-disabled-color-rgb, var(--wix-color-29))) !important;
}

.root:readOnly .dropdown .dropdownBase::affixIcon svg[fill="currentColor"] {
  color: createColor(--wix-ui-tpa-dropdown-readonly-icon-color, (var(--wix-color-5), 0.2)) !important;
  height: var(--wix-ui-tpa-dropdown-readonly-icon-size, 24px) !important;
  width: var(--wix-ui-tpa-dropdown-readonly-icon-size, 24px) !important;
}

.dropdown .dropdownBase:placeholder {
  color: createColor(--wix-ui-tpa-dropdown-main-placeholder-color, var(--wst-shade-3-color-rgb, var(--wix-color-4))) !important;
  -st-mixin: createFontWithOverrides(--wst-paragraph-2-overriden-font, --wst-paragraph-2, '{ "size": "16px", "line-height": "1.5em" }'),
  createFont((--wix-ui-tpa-dropdown-main-placeholder-font, --wix-ui-tpa-dropdown-main-text-font, --wst-paragraph-2-overriden-font), 'Body-M') !important;
}

.root:readOnly .dropdown .dropdownBase:placeholder {
  color: createColor(--wix-ui-tpa-dropdown-readonly-button-placeholder-color, var(--wix-color-4)) !important;
  -st-mixin: createFontWithOverrides(--wst-paragraph-2-overriden-font, --wst-paragraph-2, '{ "size": "16px", "line-height": "1.5em" }'),
  createFont((--wix-ui-tpa-dropdown-readonly-button-placeholder-font, --wix-ui-tpa-dropdown-main-text-font, --wst-paragraph-2-overriden-font), 'Body-M') !important;
}

.root:not(:newErrorMessage) .dropdown:content-visible .dropdownBase {
  border-color: rgb(var(--wix-color-29));
}

.root:error:not(:newErrorMessage) .dropdown:content-visible .dropdownBase:error {
  border-color: rgb(var(--wst-system-error-color-rgb, value(errorColor-rgb), 0.6)) !important;
}

.root:error:not(:newErrorMessage) .dropdown:content-visible .dropdownBase:error:focus-within,
.root:error:not(:newErrorMessage) .dropdown:content-visible .dropdownBase:error:hover {
  border-color: rgb(var(--wst-system-error-color-rgb, value(errorColor-rgb))) !important;
}

.root:error:newErrorMessage {
  -st-mixin:
    setColor(--wix-ui-tpa-error-message-wrapper-error-color, --wix-ui-tpa-dropdown-error-color, var(--wst-system-error-color-rgb, value(errorColor-rgb))),
    setVar(--wix-ui-tpa-error-message-wrapper-min-message-height, --wix-ui-tpa-dropdown-error-message-min-height);
}

.root:error:newErrorMessage .dropdown .dropdownBase {
  border-color: var(--wut-error-color, var(--wst-system-error-color-rgb, value(errorColor))) !important;
}

.root:error:newErrorMessage .dropdownNativeSelect {
  border-color: var(--wut-error-color, var(--wst-system-error-color, value(errorColor))) !important;
}

.dropdown:content-visible .dropdownBase::arrowIcon {
  transform: rotate(180deg);
}

.dropdownContainer {
  box-sizing: border-box;
  /* Popover fix. For some reason popover has inline style with transform: translate3d(-1px, 42px, 0px); */
  margin-left: 1px;
  max-width: 100%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 0 4px 0 rgba(0, 0, 0, 0.1);
  border: 1px solid createColor(--wix-ui-tpa-dropdown-main-item-text-color, var(--wst-paragraph-2-color-rgb, var(--wix-color-5)), 0.4) !important;
  background-color: createColor(--wix-ui-tpa-dropdown-main-dropdown-background-color, var(--wst-primary-background-color-rgb, var(--wix-color-1))) !important;
  border-radius: var(--wix-ui-tpa-dropdown-main-border-radius, 0);
  overflow: hidden;
}

.dropdownError::popoverContent {
  background-color: value(errorColor) !important;
}

.dropdown::dropdownContent {
  padding-top: var(--wix-ui-tpa-dropdown-content-vertical-padding, 12px);
  padding-bottom: var(--wix-ui-tpa-dropdown-content-vertical-padding, 12px);
  padding-left: var(--wix-ui-tpa-dropdown-content-horizontal-padding, 0);
  padding-right: var(--wix-ui-tpa-dropdown-content-horizontal-padding, 0);
}

.dropdown::dropdownContent::dropdownOption:hovered {
  background-color: createColor(--wix-ui-tpa-dropdown-main-item-text-color, var(--wix-color-5), 0.06);
}

.dropdown::dropdownContent::dropdownOption:selected {
  background-color: createColor(--wix-ui-tpa-dropdown-main-item-text-color, var(--wst-paragraph-2-color-rgb, var(--wix-color-5)), 0.12);
}

.dropdown::dropdownContent::dropdownOption:hovered:selected {
  background-color: createColor(--wix-ui-tpa-dropdown-main-item-text-color, var(--wst-paragraph-2-color-rgb, var(--wix-color-5)), 0.16);
}

.root:alignment(center) {
  text-align: center;
}

.root:alignment(center) .dropdownBase::content {
  flex: 1;
}

.root:alignment(center) .dropdownOption {
  justify-content: center;
}

.divider {
  opacity: 30%;
  background-color: createColor(--wix-ui-tpa-dropdown-main-item-text-color, var(--wix-color-37)) !important;
}

.divider:not(.customDivider) {
  margin: 10px 13px;
  width: auto;
  opacity: 0.2;
}

.root:theme(box):not(:outerBorder) .dropdownBase {
  border: var(--wix-ui-tpa-dropdown-main-border-width, 1px) solid createColor(--wix-ui-tpa-dropdown-main-button-border-color, var(--wix-color-5));
}

.root:theme(box):outerBorder .dropdownBase {
  border: 0;
}

.root:theme(box):outerBorder {
  box-sizing: content-box;
  border: var(--wix-ui-tpa-dropdown-main-border-width, 1px) solid createColor(--wix-ui-tpa-dropdown-main-button-border-color, var(--wix-color-5));
}

.root:theme(line) .dropdownBase {
  border: 0;
  border-bottom: var(--wix-ui-tpa-dropdown-main-border-width, 1px) solid createColor(--wix-ui-tpa-dropdown-main-button-border-color, var(--wix-color-5));
  background-color: createColor(--wix-ui-tpa-dropdown-main-background-color, transparent);
}

.root:theme(line) .dropdownBase:disabled {
  border-bottom: var(--wix-ui-tpa-dropdown-main-border-width, 1px) solid createColor(--wix-ui-tpa-dropdown-main-border-disabled-color, var(--wst-system-disabled-color-rgb, var(--wix-color-29)));
}

.root:theme(line):readOnly .dropdownBase {
  border-bottom: var(--wix-ui-tpa-dropdown-readonly-button-border-width, 1px) solid createColor(--wix-ui-tpa-dropdown-readonly-button-border-color, (var(--wix-color-5), 0.2));
}

.root:theme(line) .dropdownBase::before,
.root:theme(line) .dropdownBase::after {
  width: 0;
}

.root:theme(line) .dropdownNativeSelect {
  border: 0;
  border-bottom: var(--wix-ui-tpa-dropdown-main-border-width, 1px) solid createColor(--wix-ui-tpa-dropdown-main-button-border-color, var(--wix-color-5));
  background-color: createColor(--wix-ui-tpa-dropdown-main-background-color, var(--wst-primary-background-color-rgb, transparent));
  padding-left: 0;
  padding-right: 0;
}


.root:theme(line) .dropdownNativeSelect:disabled {
  border-bottom: var(--wix-ui-tpa-dropdown-main-border-width, 1px) solid createColor(--wix-ui-tpa-dropdown-main-border-disabled-color, var(--wst-system-disabled-color-rgb, var(--wix-color-29))) !important;
}

.root:theme(line) .dropdownNativeSelect:readOnly {
  border-bottom: var(--wix-ui-tpa-dropdown-readonly-button-border-width, 1px) solid createColor(--wix-ui-tpa-dropdown-readonly-button-border-color, (var(--wix-color-5), 0.2));
  background-color: createColor(--wix-ui-tpa-dropdown-readonly-button-background-color, transparent);
}

.root:theme(line):rtl .dropdownNativeSelect ~ .arrowIcon {
  left: 0;
}

.root:theme(line):not(:rtl) .dropdownNativeSelect ~ .arrowIcon {
  right: 0 !important;
}

.root:theme(line):rtl .dropdownNativeSelect ~ .errorIconWrapper {
  left: 25px;
}

.root:theme(line):not(:rtl) .dropdownNativeSelect ~ .errorIconWrapper {
  right: 25px;
}

/* st-namespace-reference="../../../../src/components/Dropdown/Dropdown.st.css" */