@st-namespace 'DropdownNativeSelect-deprecated-st-css';
:import {
    -st-from: "../../common/formatters.st";
    -st-named: color, fallback;
}

:import {
    -st-from: "../Button/Button.deprecated.st.css";
    -st-default: TPAButton;
}

:import {
    -st-from: "../Input/Input.deprecated.st.css";
    -st-default: TPAInput;
    -st-named: backgroundColor, colorDisabled, colorPlaceholder, color as inputColor, errorColor, borderColor, borderRadius, borderWidth;
}

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

:import {
    -st-from: "../Tooltip/Tooltip.deprecated.st.css";
    -st-default: TPATooltip;
}

:vars {
    BorderHoverColor: color-5;
    DefaultButtonTextColor: value(inputColor);
    DefaultButtonTextDisabledColor: value(colorDisabled);
    DefaultButtonBorderColor: value(borderColor);
    DefaultButtonBorderWidth: value(borderWidth);
    DefaultButtonBorderRadius: value(borderRadius);
    DefaultBorderDisabledColor: value(colorDisabled);
    DefaultBackgroundColor: value(backgroundColor);
    arrowIconSize: 24px;
}

/*Overrides*/
:vars {
    /*
        The button’s text color
    */
    MainButtonTextColor: --overridable;
    /*
        The disabled button’s text color
    */
    MainButtonTextDisabledColor: --overridable;
    /*
        The button's border color
    */
    MainButtonBorderColor: --overridable;
    /*
        The button's border width
    */
    MainButtonBorderWidth: --overridable;
    /*
        The button's border radius
    */
    MainButtonBorderRadius: --overridable;
    /*
        The disabled button's border color
    */
    MainBorderDisabledColor: --overridable;
    /*
        The button's background color
        @default color-1
    */
    MainBackgroundColor: --overridable;
}

/*
 * The button’s text color
 * @type color
 */
@property st-global(--wix-ui-tpa-dropdown-native-select-main-button-text-color);

/*
 * The disabled button’s text color
 * @type color
 */
@property st-global(--wix-ui-tpa-dropdown-native-select-main-button-text-disabled-color);

/*
 * The button's border color
 * @type color
 */
@property st-global(--wix-ui-tpa-dropdown-native-select-main-button-border-color);

/*
 * The button's border width
 * @type size
 */
@property st-global(--wix-ui-tpa-dropdown-native-select-main-button-border-width);

/*
 * The button's border radius
 * @type size
 */
@property st-global(--wix-ui-tpa-dropdown-native-select-main-button-border-radius);

/*
 * The disabled button's border color
 * @type color
 */
@property st-global(--wix-ui-tpa-dropdown-native-select-main-border-disabled-color);

/*
 * The button's background color
 * @type color
 * @default --wix-color-1
 */
@property st-global(--wix-ui-tpa-dropdown-native-select-main-background-color);

:vars {
    borderHoverColor: color(value(BorderHoverColor));
    CurrentButtonTextColor: color(fallback(value(MainButtonTextColor), value(DefaultButtonTextColor)));
    CurrentButtonTextDisabledColor: color(fallback(value(MainButtonTextDisabledColor), value(DefaultButtonTextDisabledColor)));
    CurrentButtonBorderColor: color(fallback(value(MainButtonBorderColor), value(DefaultButtonBorderColor)));
    CurrentButtonBorderWidth: fallback(value(MainButtonBorderWidth), value(DefaultButtonBorderWidth));
    CurrentButtonBorderRadius: fallback(value(MainButtonBorderRadius), value(DefaultButtonBorderRadius));
    CurrentBorderDisabledColor: color(fallback(value(MainBorderDisabledColor), value(DefaultBorderDisabledColor)));
    CurrentBackgroundColor: color(fallback(value(MainBackgroundColor), value(DefaultBackgroundColor)));
}

.wrapper {
    position: relative;
    min-width: 68px;
}

.root {
    -st-states: disabled, error, placeholder, rtl, icon, fullWidth;
    -st-extends: TPAButton;
    -st-mixin: TPAButton(
        MainBackgroundColor value(DefaultBackgroundColor),
        MainBorderWidth value(CurrentButtonBorderWidth),
        MainBorderColor value(DefaultButtonBorderColor),
        MainBorderRadius value(CurrentButtonBorderRadius),
    );
    box-sizing: border-box;
    color: value(DefaultButtonTextColor) !important;
    display: flex;
    cursor: pointer;
    outline: none;
    appearance: none;
    opacity: 1;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.root.overrideStyleParams {
    -st-mixin: TPAButton(
        MainBackgroundColor value(CurrentBackgroundColor),
        MainBorderWidth value(CurrentButtonBorderWidth),
        MainBorderColor value(CurrentButtonBorderColor),
        MainBorderRadius value(CurrentButtonBorderRadius),
        MainTextColor value(CurrentButtonTextColor),
    );
    color: value(CurrentButtonTextColor) !important;
}

.optionIcon {
    position: absolute;
    display: flex;
    top: 50%;
    transform: translateY(-50%);
}

.root:rtl ~ .optionIcon {
    right: 12px;
}

.root:not(:rtl) ~ .optionIcon {
    left: 12px;
}

.root:mobile {
    padding: 8px 12px;
    background-color: transparent;
}

.root:mobile:icon {
    padding: 8px 36px;
}

.root.overrideStyleParams:fullWidth {
  width: 100%;
  box-sizing: border-box;
}

.root:focus {
    border-color: value(borderHoverColor);
    background-color: value(backgroundColor);
}

.root:error,
.root:error:focus {
    border-color: value(errorColor);
}

.overrideStyleParams {
    -st-extends: root;
}

.root:placeholder {
    color: value(colorPlaceholder);
}

.root:disabled {
    cursor: default;
    color: value(DefaultButtonTextDisabledColor) !important;
    border-color: value(DefaultBorderDisabledColor) !important;
}

.root:disabled:hover {
    border-color: value(DefaultButtonTextDisabledColor) !important;
}

.root:disabled ~ .arrowIcon,
.root:disabled ~ .loader {
    color: value(DefaultButtonTextDisabledColor) !important;
}

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

.root:disabled.overrideStyleParams ~ .arrowIcon,
.root:disabled.overrideStyleParams ~  .loader {
    color: value(CurrentButtonTextDisabledColor) !important;
    border-color: value(CurrentBorderDisabledColor) !important;
}

.arrowIcon{
    color: value(DefaultButtonTextColor);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 0;
    pointer-events: none;
    width: value(arrowIconSize);
    height: value(arrowIconSize);
}

.root.overrideStyleParams ~ .arrowIcon,
.root.overrideStyleParams ~ .loader {
    color: value(CurrentButtonTextColor);
}

.errorIcon {
    -st-extends: Tooltip;
    -st-mixin: TPATooltip;
    color: value(errorColor);
}

.errorIcon::popover {
    min-width: initial;
}

.errorIcon::popoverElement {
    display: flex; /* vertical center error icon */
}

.root:rtl ~ .arrowIcon,
.root:rtl ~  .loader {
    left: 7px;
}

.root:not(:rtl) ~ .arrowIcon,
.root:not(:rtl) ~ .loader {
    right: 7px;
}

.root:rtl ~ .errorIconWrapper {
    left: 32px;
}

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

.errorIconWrapper {
    position: absolute;
    display: flex;
    height: 100%;
    top: 0;
    align-items: center;
}
.suffixContainer {
  height: 100%;
  position: absolute;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: end;
  right: 7px;
}

.loader {
  color: value(DefaultButtonTextColor);
  z-index: 0;
  pointer-events: none;
  width: value(arrowIconSize);
  height: value(arrowIconSize);
}

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