@st-namespace 'DropdownNativeSelect-st-css';
@st-import [ --wix-color-29, --wix-color-1, --wix-color-4, --wix-color-5 ] from '@wix/tpa-style-webpack-plugin/stylable-variables.st.css';
@st-import [ createColor, createFont, setColor, setFont, setVar ] from '../../common/formatters.st';
@st-import [ errorColor, errorColor-rgb ] from '../../common/palette.st.css';
@st-import TPAButton from '../Button/Button.st.css';
@st-import Tooltip from '../internal/WixUiCoreComponents/components/CoreTooltip/CoreTooltip.st.css';
@st-import TPATooltip from '../Tooltip/Tooltip.st.css';
@st-import [ --wst-system-disabled-color-rgb, --wst-system-error-color-rgb, --wst-paragraph-2-color-rgb ] from '@wix/wix-site-theme-variables/stylable-variables.st.css';

@st-import [
  --wix-ui-tpa-dropdown-main-button-text-color,
  --wix-ui-tpa-dropdown-hover-text-color,
  --wix-ui-tpa-dropdown-main-text-font,
  --wix-ui-tpa-dropdown-readonly-button-text-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-readonly-button-border-color,
] from "./Dropdown.styleApi.st.css";

/*
 * 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 background color
 * @type color
 * @default --wix-color-1
 */
@property st-global(--wix-ui-tpa-dropdown-native-select-main-background-color);

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

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

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

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

/*
 * The readonly button’s text color
 * @type color
 * @default --wix-color-5
 */
@property st-global(--wix-ui-tpa-dropdown-native-select-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-native-select-readonly-button-icon-color);

 /*
 * The readonly button's icon size
 * @type size
 * @default 24
 */
@property st-global(--wix-ui-tpa-dropdown-native-select-readonly-button-icon-size);

/*
 * Readonly button's placeholder color
 * @type color
 * @default --wix-color-4
 */
@property st-global(--wix-ui-tpa-dropdown-native-select-readonly-placeholder-color);

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

.root {
    -st-states: disabled, error, placeholder, rtl, icon, fullWidth, readOnly;
    -st-extends: TPAButton;
    -st-mixin:
      TPAButton,
      setColor(--wix-ui-tpa-button-main-background-color, --wix-ui-tpa-dropdown-native-select-main-background-color, var(--wix-color-1)),
      setVar(--wix-ui-tpa-button-main-border-width, --wix-ui-tpa-dropdown-main-border-width, null, 1px),
      setColor(--wix-ui-tpa-button-main-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-placeholder-color, --wix-ui-tpa-dropdown-main-placeholder-color, var(--wix-color-4), 1),
      setFont(--wix-ui-tpa-button-main-text-font, --wix-ui-tpa-dropdown-main-text-font, 'Body-M', '{"size": "16px", "line-height": "1"}'),
      setVar(--wix-ui-tpa-button-main-border-radius, --wix-ui-tpa-dropdown-main-border-radius, null, 0);
    border-color: createColor(--wix-ui-tpa-dropdown-main-button-border-color, var(--wst-system-disabled-color-rgb, var(--wix-color-5)), 0.6) !important;
    box-sizing: border-box;
    display: flex;
    cursor: pointer;
    outline: none;
    appearance: none;
    opacity: 1;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.root:readOnly {
    cursor: default;
    -st-mixin:
      setColor(--wix-ui-tpa-button-main-background-color, --wix-ui-tpa-dropdown-native-select-readonly-button-background-color, var(--wix-color-1)),
      setVar(--wix-ui-tpa-button-main-border-width, --wix-ui-tpa-dropdown-native-select-readonly-button-border-width, null, 1px),
      setColor(--wix-ui-tpa-button-main-text-color, --wix-ui-tpa-dropdown-native-select-readonly-button-text-color, var(--wix-color-5)),
      setColor(--wix-ui-tpa-dropdown-native-select-readonly-placeholder-color, --wix-ui-tpa-dropdown-readonly-button-placeholder-color, var(--wix-color-4), 1),
      setFont(--wix-ui-tpa-button-main-text-font, --wix-ui-tpa-dropdown-readonly-button-text-font, 'Body-M', '{"size": "16px", "line-height": "1"}');
    border-color: createColor(--wix-ui-tpa-dropdown-readonly-button-border-color, (var(--wix-color-5), 0.2)) !important;
    border-radius: var(--wix-ui-tpa-dropdown-readonly-button-border-radius, var(--wix-ui-tpa-dropdown-main-border-radius, 0));
}

.wrapper .root {
  padding: 8px 12px;
  background-color: createColor(--wix-ui-tpa-button-main-background-color, var(--wix-color-1));
}

.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:fullWidth {
  width: 100%;
  box-sizing: border-box;
}

.root:focus {
    border-color: rgb(var(--wix-color-5));
    background-color: rgb(var(--wix-color-1));
}

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

.root:placeholder {
    color: createColor(--wix-ui-tpa-dropdown-native-select-main-placeholder-color, var(--wix-color-4), var(--wix-ui-tpa-dropdown-native-select-main-placeholder-opacity, 1));
}

.root:readOnly:placeholder {
    color: createColor(--wix-ui-tpa-dropdown-native-select-readonly-placeholder-color, var(--wix-color-4));
}

.root:disabled {
    cursor: default;
    color: createColor(--wix-ui-tpa-dropdown-native-select-main-button-text-disabled-color, var(--wix-color-29));
    border-color: createColor(--wix-ui-tpa-dropdown-native-select-main-border-disabled-color, var(--wix-color-29));
}

.root:not(:readOnly):not(:disabled):not(:error):focus-within,
.root:not(:readOnly):not(:disabled):not(:error):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-button-main-background-color), var(--wix-color-1), 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-radius: var(--wix-ui-tpa-dropdown-hover-border-radius, var(--wix-ui-tpa-dropdown-main-border-radius, 0));
  border-width: var(--wix-ui-tpa-dropdown-hover-border-width, var(--wix-ui-tpa-dropdown-main-border-width, 1px)) !important;
}

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

.root:disabled:hover {
    border-color: createColor(--wix-ui-tpa-dropdown-native-select-main-button-text-disabled-color, var(--wix-color-29));
}

.root:disabled ~ .suffixContainer .arrowIcon {
    color: createColor(--wix-ui-tpa-dropdown-native-select-main-button-text-disabled-color, var(--wix-color-29));
    border-color: createColor(--wix-ui-tpa-dropdown-native-select-main-border-disabled-color, var(--wix-color-29));
}

.root:readOnly ~ .suffixContainer .arrowIcon {
    color: createColor(--wix-ui-tpa-dropdown-native-select-readonly-button-icon-color, (var(--wix-color-5), 0.2));
    width: var(--wix-ui-tpa-dropdown-native-select-readonly-button-icon-size, 24px);
    height: var(--wix-ui-tpa-dropdown-native-select-readonly-button-icon-size, 24px);
}

.arrowIcon {
    -st-mixin:
      createFont(--wix-ui-tpa-dropdown-main-text-font, 'Body-M', '{"size": "16px", "line-height": "1"}');
    color: createColor(--wix-ui-tpa-dropdown-native-select-main-button-text-color, var(--wix-color-5));
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 0;
    pointer-events: none;
    --arrowIconSize: calc(calc(24 / 16) * 1em); /*when font size is 16px icons size should be 24px*/
    width: var(--arrowIconSize);
    height: var(--arrowIconSize);
}

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

.root:rtl ~ .suffixContainer {
  left: 7px;
}

.loader {
  z-index: 0;
  pointer-events: none;
  width: 24px;
  height: 24px;
}

.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:rtl ~ .errorIconWrapper {
    left: 32px;
}

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

.errorIconWrapper {
    position: absolute;
    display: flex;
    height: 100%;
    top: 0;
    align-items: center;
}

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