@st-namespace 'Dropdown-deprecated-st-css';
@property st-global(--wut-error-color);

:import {
  -st-from: "../internal/WixUiCoreComponents/components/CoreDropdown/CoreDropdown.st.css";
  -st-default: Dropdown;
}

:import {
    -st-from: "../Input/Input.deprecated.st.css";
    -st-named: colorPlaceholder;
}

:import {
  -st-from: "../internal/WixUiCoreComponents/components/CoreDivider/CoreDivider.st.css";
  -st-default: Divider;
}

:import {
  -st-from: "../../common/palette.st.css";
  -st-named: errorColor;
}

:import {
  -st-from: "../../common/formatters.st";
  -st-named: applyUnit, color, font, zeroAsTrue, fallback, applyOpacity, unit;
}

:import {
    -st-from: "../Text/Text.deprecated.st.css";
    -st-default: TPAText;
}

:import {
    -st-from: "../Input/Input.deprecated.st.css";
    -st-default: TPAInput;
    -st-named: backgroundColorHover;
}

:import {
    -st-from: "./DropdownBase.deprecated.st.css";
    -st-default: DropdownBase;
    -st-named: borderHoverColor;
}

:import {
    -st-from: "./DropdownNativeSelect.deprecated.st.css";
    -st-default: DropdownNativeSelect;
    -st-named: overrideStyleParams as overrideStyleParamsDropdownNativeSelectMixin, arrowIcon
}

:import {

  -st-from: "../IconTooltip/IconTooltip.st.css";
  -st-default: IconTooltip;
}

:import {
    -st-from: "./DropdownOption.deprecated.st.css";
    -st-default: DropdownOption;
    -st-named: overrideStyleParams as overrideStyleParamsOptionMixin;
}

:import {
    -st-from: "../internal/ErrorMessageWrapper/ErrorMessageWrapper.deprecated.st.css";
    -st-default: ErrorMessageWrapper;
}

/* Defaults - default param */
:vars {
  DefaultButtonTextColor: color-5;
  DefaultButtonTextDisabledColor: color-3;
  DefaultButtonBorderColor: color-5;
  DefaultBorderDisabledColor: color-3;
  DefaultBorderWidth: 1px;
  DefaultBorderRadius: 0;
  DefaultBackgroundColor: color-1;
  DefaultPlaceholderColor: color-4;
  DefaultTextFont: "{theme: 'Body-M', size: '16px', lineHeight: '1.5'}";
  DefaultMobileTextFont: "{theme: 'Body-M', size: '14px', lineHeight: '1.5'}";
  DefaultDropdownBackgroundColor: color-1;
  DefaultItemTextColor: color-5;
  DefaultItemTextFont: "{theme: 'Body-M', size: '16px', lineHeight: '1.5'}";
  DefaultItemTextDisabledColor: color-3;
  DefaultLabelColor: color-5;
  DefaultLabelFont: "{theme: 'Body-M', size: '14px'}";
  DefaultLabelMobileFont: "{theme: 'Body-M', size: '12px'}";
  DefaultLineThemeMainBackgroundColor: transparent;
  DefaultDropdownHeight: '42px';
  DefaultMainBorderOpacity: 0.6;
  DefaultHoverBackgroundOpacity: 1;
}

/*Overrides*/
:vars {
  /*
      The button’s text color
      @default 0
  */
  MainButtonTextColor: --overridable;
  /*
      The disabled button’s text color
      @default 0
  */
  MainButtonTextDisabledColor: --overridable;
  /*
      The button's border color
      @default color-1
  */
  MainButtonBorderColor: --overridable;
  /*
      The disabled button's border color
      @default color-1
  */
  MainBorderDisabledColor: --overridable;
  /*
      The button's border width
      @default 1px
  */
  MainBorderWidth: --overridable;
  /*
      The button's border radius
      @default 1px
  */
  MainBorderRadius: --overridable;
  /*
      The button's background color
      @default color-1
  */
  MainBackgroundColor: --overridable;
  /*
      The button's placeholder color
      @default color-1
  */
  MainPlaceholderColor: --overridable;
  /*
      The button's font
      @default "{theme: 'Body-M', size: '14px'}"
  */
  MainTextFont: --overridable;
  /*
      Dropdown's background color
      @default color-1
  */
  MainDropdownBackgroundColor: --overridable;
  /*
      Item text color
      @default color-1
  */
  MainItemTextColor: --overridable;
  /*
      Item text font
      @default "{theme: 'Body-M', size: '16px'}"
  */
  MainItemTextFont: --overridable;
  /*
      Item text disabled color
      @default color-3
  */
  MainItemTextDisabledColor: --overridable;
  /*
      Label text font
      @default "{theme: 'Body-M', size: '14px'}"
  */
  MainLabelFont: --overridable;
  /*
      Label color
      @default color-5
  */
  MainLabelColor: --overridable;

  /*
      Dropdown height
      @default 42px
  */
  MainDropdownHeight: --overridable;
  /*
      The color representing an error
      @default #DF3131
  */
  ErrorColor: --overridable;
  /*
      A minimum height for the error message element
  */
  ErrorMessageMinHeight: --overridable;
  /*
    Border opacity
    @default 0.6
  */
  MainBorderOpacity: --overridable;
  /*
    Border color
    @default color-5
  */
  HoverBorderColor: --overridable;
  /*
    Hover border width
    @default 1
  */
  HoverBorderWidth: --overridable;
  /*
    Hover border radius
    @default 0
  */
  HoverBorderRadius: --overridable;
  /*
    Hover background color
    @default color-1
  */
  HoverBackgroundColor: --overridable;
  /*
    Hover background color
    @default 1
  */
  HoverBackgroundOpacity: --overridable;
  /*
    Hover text color
    @default color-5
  */
  HoverTextColor: --overridable;
}
/*
 * The button’s text color
 * @type color
 * @default 0
 */
@property st-global(--wix-ui-tpa-dropdown-main-button-text-color);
/*
 * The disabled button’s text color
 * @type color
 * @default 0
 */
@property st-global(--wix-ui-tpa-dropdown-main-button-text-disabled-color);
/*
 * The button's border color
 * @type color
 * @default --wix-color-1
 */
@property st-global(--wix-ui-tpa-dropdown-main-button-border-color);
/*
 * The disabled button's border color
 * @type color
 * @default --wix-color-1
 */
@property st-global(--wix-ui-tpa-dropdown-main-border-disabled-color);
/*
 * The button's border width
 * @type size
 * @default 1px
 */
@property st-global(--wix-ui-tpa-dropdown-main-border-width);
/*
 * The button's border radius
 * @type size
 * @default 1px
 */
@property st-global(--wix-ui-tpa-dropdown-main-border-radius);
/*
 * 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-1
 */
@property st-global(--wix-ui-tpa-dropdown-main-placeholder-color);
/*
 * The button's font
 * @type font
 * @default "preset: 'Body-M' | overrides: { size: '14px'}"
 */
@property st-global(--wix-ui-tpa-dropdown-main-text-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-1
 */
@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-3
 */
@property st-global(--wix-ui-tpa-dropdown-main-item-text-disabled-color);
/*
 * Label text font
 * @type font
 * @default "preset: 'Body-M' | overrides: { size: '14px'}"
 */
@property st-global(--wix-ui-tpa-dropdown-main-label-font);
/*
 * 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
 * @default 0.6
 */
@property st-global(--wix-ui-tpa-dropdown-main-border-opacity);
/*
 * Hover border color
 * @type color
 * @default color-5
 */
@property st-global(--wix-ui-tpa-dropdown-hover-border-color);
/*
 * Hover border width
 * @type size
 * @default 1
 */
@property st-global(--wix-ui-tpa-dropdown-hover-border-width);
/*
 * Hover border radius
 * @type size
 * @default 0
 */
@property st-global(--wix-ui-tpa-dropdown-hover-border-radius);
/*
 * Hover background color
 * @type color
 * @default color-1
 */
@property st-global(--wix-ui-tpa-dropdown-hover-background-color);
/*
 * Hover background opacity
 * @default 1
 */
@property st-global(--wix-ui-tpa-dropdown-hover-background-opacity);
/*
 * Hover text color
 * @type color
 * @default color-5
 */
@property st-global(--wix-ui-tpa-dropdown-hover-text-color);

:vars {
  CurrentButtonTextColor: color(fallback(value(MainButtonTextColor), value(DefaultButtonTextColor)));
  CurrentButtonTextDisabledColor: color(fallback(value(MainButtonTextDisabledColor), value(DefaultButtonTextDisabledColor)));
  CurrentButtonBorderColor: color(fallback(value(MainButtonBorderColor), value(DefaultButtonBorderColor)));
  CurrentBorderDisabledColor: color(fallback(value(MainBorderDisabledColor), value(DefaultBorderDisabledColor)));
  CurrentBorderWidth: fallback(value(MainBorderWidth), value(DefaultBorderWidth));
  CurrentBorderRadius: fallback(value(MainBorderRadius), value(DefaultBorderRadius));
  CurrentBackgroundColor: color(fallback(value(MainBackgroundColor), value(DefaultBackgroundColor)));
  CurrentPlaceholderColor: color(fallback(value(MainPlaceholderColor), value(DefaultPlaceholderColor)));
  CurrentTextFont: fallback(font(value(MainTextFont)), font(value(DefaultTextFont)));
  CurrentDropdownBackgroundColor: color(fallback(value(MainDropdownBackgroundColor), value(DefaultDropdownBackgroundColor)));
  CurrentItemTextColor: color(fallback(value(MainItemTextColor), value(DefaultItemTextColor)));
  CurrentItemTextFont: fallback(font(value(MainItemTextFont)), font(value(MainTextFont)), font(value(DefaultTextFont)));
  CurrentItemTextDisabledColor: color(fallback(value(MainItemTextDisabledColor), value(DefaultItemTextDisabledColor)));
  CurrentLabelFont: fallback(font(value(MainLabelFont)), font(value(DefaultLabelFont)));
  CurrentLabelMobileFont: fallback(font(value(MainLabelFont)), font(value(DefaultLabelMobileFont)));
  CurrentLabelColor: color(fallback(value(MainLabelColor), value(DefaultLabelColor)));
  CurrentDropdownHeight: fallback(value(MainDropdownHeight), value(DefaultDropdownHeight));
  CurrentErrorColor: fallback(value(ErrorColor), value(errorColor));
  CurrentMainBorderOpacity: fallback(value(MainBorderOpacity), value(DefaultMainBorderOpacity));
  CurrentHoverBorderColor: color(fallback(value(HoverBorderColor), value(CurrentButtonBorderColor)));
  CurrentHoverBorderWidth: fallback(value(HoverBorderWidth), value(CurrentBorderWidth));
  CurrentHoverBorderRadius: fallback(value(HoverBorderRadius), value(CurrentBorderRadius));
  CurrentHoverBackgroundColor: color(fallback(value(HoverBackgroundColor), value(CurrentBackgroundColor)));
  CurrentHoverBackgroundOpacity: fallback(value(HoverBackgroundOpacity), value(DefaultHoverBackgroundOpacity));
  CurrentHoverTextColor: color(fallback(value(HoverTextColor), value(CurrentButtonTextColor)));
}

.root {
  -st-states: alignment(enum(center)), mobile, error, theme(enum(line, box)), rtl, newErrorMessage;
}


.label {
  color: value(CurrentLabelColor);
  font: value(CurrentLabelFont);
  display: block;
  margin-bottom: 8px;
}
.root:mobile .label {
  font: value(CurrentLabelMobileFont);
}
.root.overrideStyleParams .label {
  color: value(CurrentLabelColor);
  font: value(CurrentLabelFont);
}

.root:mobile.overrideStyleParams .label {
  font: value(CurrentLabelMobileFont);
}

.dropdownBase {
  -st-extends: DropdownBase;
}

.dropdownOption {
  -st-extends: DropdownOption;
}

.dropdownOption{
  -st-mixin: overrideStyleParamsOptionMixin(
    MainTitleTextColor value(DefaultItemTextColor),
    MainTitleTextFont value(DefaultItemTextFont),
    MainItemTextDisabledColor value(DefaultItemTextDisabledColor),
  );
}

.root.overrideStyleParams .dropdownOption{
  -st-mixin: overrideStyleParamsOptionMixin(
    MainTitleTextFont value(CurrentItemTextFont),
    MainTitleTextColor value(CurrentItemTextColor),
    MainItemTextDisabledColor value(CurrentItemTextDisabledColor),
  );
}

.dropdownNativeSelect {
  -st-extends: DropdownNativeSelect;
  -st-mixin: overrideStyleParamsDropdownNativeSelectMixin(
    MainButtonTextColor value(DefaultButtonTextColor),
    MainButtonTextDisabledColor value(DefaultButtonTextDisabledColor),
    MainButtonBorderColor value(DefaultButtonBorderColor),
    MainButtonBorderWidth value(DefaultBorderWidth),
    MainButtonBorderRadius value(DefaultBorderRadius),
    MainBorderDisabledColor value(DefaultBorderDisabledColor),
    MainBackgroundColor value(DefaultBackgroundColor),
  );
}

.root.overrideStyleParams .dropdownNativeSelect {
  -st-mixin: overrideStyleParamsDropdownNativeSelectMixin(
    MainButtonTextColor value(CurrentButtonTextColor),
    MainButtonTextDisabledColor value(CurrentButtonTextDisabledColor),
    MainButtonBorderColor value(CurrentButtonBorderColor),
    MainButtonBorderWidth value(CurrentBorderWidth),
    MainButtonBorderRadius value(CurrentBorderRadius),
    MainBorderDisabledColor value(CurrentBorderDisabledColor),
    MainBackgroundColor value(CurrentBackgroundColor),
  );
}
.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;
}

.root.overrideStyleParams .dropdown,
.root.overrideStyleParams .dropdownBase,
.root.overrideStyleParams .dropdownNativeSelect {
  height: value(CurrentDropdownHeight);
}

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

.dropdownNativeSelect:error {
  border-color: value(errorColor);
}

.dropdown .dropdownBase {
  color: value(DefaultButtonTextColor) !important;
  border-width: value(DefaultBorderWidth) !important;
  border-radius: value(CurrentBorderRadius) !important;
  background: value(DefaultBackgroundColor) !important;
  font: font(value(DefaultTextFont)) !important;
}

.dropdown .dropdownBase:not(:error) {
  border-color: applyOpacity(color(value(DefaultButtonBorderColor)), value(CurrentMainBorderOpacity)) !important;
}


.dropdown .dropdownBase:not(:error):focus-within,
.dropdown .dropdownBase:not(:error):hover {
  background-color: applyOpacity(color(value(CurrentHoverBackgroundColor)), value(CurrentHoverBackgroundOpacity)) !important;
  color: value(CurrentHoverTextColor) !important;
  border-color: applyOpacity(color(value(CurrentHoverBorderColor)), 1) !important;
  border-width: value(CurrentHoverBorderWidth) !important;
  border-radius: value(CurrentHoverBorderRadius) !important;
}

.dropdown .dropdownBase:not(:error):focus-within::arrowIcon,
.dropdown .dropdownBase:not(:error):hover::arrowIcon {
  color: value(CurrentHoverTextColor) !important;
}

.root.overrideStyleParams .dropdown .dropdownBase
{
  color: value(CurrentButtonTextColor) !important;
  border-width: value(CurrentBorderWidth) !important;
  border-radius: value(CurrentBorderRadius) !important;
  background: value(CurrentBackgroundColor) !important;
  font: value(CurrentTextFont) !important;
}

.root.overrideStyleParams .dropdown .dropdownBase:not(:error)
{
  border-color: applyOpacity(color(value(CurrentButtonBorderColor)), value(CurrentMainBorderOpacity)) !important;
}

.root.overrideStyleParams .dropdown .dropdownBase:not(:error):focus-within,
.root.overrideStyleParams .dropdown .dropdownBase:not(:error):hover {
  background-color: applyOpacity(color(value(CurrentHoverBackgroundColor)), value(CurrentHoverBackgroundOpacity)) !important;
  color: value(CurrentHoverTextColor) !important;
  border-color: applyOpacity(color(value(CurrentHoverBorderColor)), 1) !important;
  border-width: value(CurrentHoverBorderWidth) !important;
  border-radius: value(CurrentHoverBorderRadius) !important;
}

.root.overrideStyleParams .dropdown .dropdownBase:not(:error):focus-within::arrowIcon,
.root.overrideStyleParams .dropdown .dropdownBase:not(:error):hover::arrowIcon {
  color: value(CurrentHoverTextColor) !important;
}

.dropdown .dropdownBase::arrowIcon {
  color: value(DefaultButtonTextColor);
}

.root.overrideStyleParams .dropdown .dropdownBase::arrowIcon {
  color: value(CurrentButtonTextColor);
}

.dropdown .dropdownBase:disabled::affixIcon svg[fill="currentColor"] {
  color: value(DefaultButtonTextDisabledColor);
}

.root.overrideStyleParams .dropdown .dropdownBase:disabled::affixIcon svg[fill="currentColor"] {
  color: value(CurrentButtonTextDisabledColor);
}

.root.overrideStyleParams .dropdown .dropdownBase::affixIcon svg[fill="currentColor"] {
  color: value(CurrentButtonTextColor);
}

.dropdown .dropdownBase:disabled {
  color: value(DefaultButtonTextDisabledColor) !important;
  border-color: value(DefaultBorderDisabledColor) !important;
}

.dropdown .dropdownBase:placeholder {
  color: value(DefaultPlaceholderColor);
}

.root.overrideStyleParams .dropdown .dropdownBase:placeholder {
  color: value(CurrentPlaceholderColor) !important;
}

.root.overrideStyleParams .dropdown .dropdownBase:disabled {
  color: value(CurrentButtonTextDisabledColor) !important;
  border-color: value(CurrentBorderDisabledColor) !important;
}

.root:not(:newErrorMessage) .dropdown:content-visible .dropdownBase {
  border-color: value(borderHoverColor);
}

.root:error:not(:newErrorMessage) .dropdown:content-visible .dropdownBase:error {
  border-color: applyOpacity(color(value(errorColor)), value(CurrentMainBorderOpacity)) !important;
}

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

.root:error:newErrorMessage.overrideStyleParams {
  -st-mixin: ErrorMessageWrapper(
    ErrorColor value(CurrentErrorColor),
    MinMessageHeight unit(value(ErrorMessageMinHeight), px)
  );
}

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

.root:error:newErrorMessage.overrideStyleParams .dropdownNativeSelect {
  border-color: var(--wut-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);
  background-color: color(color-1);
  border: 1px solid applyOpacity(color(color-5), 0.4);
}

.root.overrideStyleParams .dropdownContainer {
  border: 1px solid applyOpacity(value(CurrentItemTextColor), 0.4);
  background-color: value(CurrentDropdownBackgroundColor);
  border-radius: value(CurrentBorderRadius);
}

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

.dropdown::dropdownContent {
  padding: 12px 0;
}

.dropdown::dropdownContent::dropdownOption:hovered {
  background-color: applyOpacity(color(color-5), 0.06);
}

.dropdown::dropdownContent::dropdownOption:selected {
  background-color: applyOpacity(color(color-5), 0.12);
}

.dropdown::dropdownContent::dropdownOption:hovered:selected {
  background-color: applyOpacity(color(color-5), 0.16);
}

.root.overrideStyleParams .dropdown::dropdownContent::dropdownOption:hovered {
  background-color: applyOpacity(value(CurrentItemTextColor), 0.06);
}

.root.overrideStyleParams .dropdown::dropdownContent::dropdownOption:selected {
  background-color: applyOpacity(value(CurrentItemTextColor), 0.12);
}

.root.overrideStyleParams .dropdown::dropdownContent::dropdownOption:selected:hovered {
  background-color: applyOpacity(value(CurrentItemTextColor), 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: value(DefaultItemTextColor);
}

.root.overrideStyleParams .divider {
  background-color: value(CurrentItemTextColor);
}

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

.root:theme(box) .dropdownBase {
  border: 1px solid color(value(CurrentButtonBorderColor));
}

.root:theme(line) .dropdownBase {
  border: 0;
  border-bottom: value(CurrentBorderWidth) solid color(value(CurrentButtonBorderColor));
  background-color: color(fallback(value(MainBackgroundColor), value(DefaultLineThemeMainBackgroundColor)));
}
.root:theme(line) .dropdownBase:disabled {
  border-bottom: value(CurrentBorderWidth) solid color(value(CurrentBorderDisabledColor));
}

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

.root:theme(line).overrideStyleParams .dropdownNativeSelect {
  border: 0;
  border-bottom: value(CurrentBorderWidth) solid color(value(CurrentButtonBorderColor));
  background-color: color(fallback(value(MainBackgroundColor), value(DefaultLineThemeMainBackgroundColor)));
  padding-left: 0;
  padding-right: 0;
}


.root:theme(line).overrideStyleParams .dropdownNativeSelect:disabled {
  border-bottom: value(CurrentBorderWidth) solid color(value(CurrentBorderDisabledColor));
}

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

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

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

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

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