:import {
  -st-from: "wix-ui-core/index.st.css";
  -st-named: LabelWithOptions;
}

:import {
  -st-from: "../Input/Input.st.css";
  -st-default: Input;
  -st-named:
  inputBackground,
  inputBorderColor,
  inputHover,
  inputFocusBorderColor,
  inputDisabledColor,
  inputDisabledBorderColor,
  inputDisabledHoverBorderColor,
}

:import {
  -st-from: "../../colors.st.css";
  -st-named: 
    B10, B20,
    D10, D50, D60,
    R10,
    WHITE
}
:import {
  -st-from: "../../typography.st.css";
  -st-named: fontRoman;
}

:import {
    -st-from: "../Input/InputStates.st.css";
    -st-named: largeFont, medFont, smallFont, largeHeight, medHeight, smallHeight;
}

:import {
  -st-from: "wix-ui-core/dist/src/mixins/calc";
  -st-default: calc;
}

:import {
  -st-from: "../../shadows.st.css";
  -st-named: shadow30;
}

.root {
  -st-extends: LabelWithOptions;
  -st-states: size(enum(large, medium, small));
  font-family: value(fontRoman);
  width: 100%;
}

.root > [data-hook="popover-content"] {
  border: none;
  border-radius: 8px;
  box-shadow: value(shadow30);
  width: 100%;
  overflow: hidden;
}

.root::selection {
  background-color: value(inputBackground);
  border-radius: 6px;
  border: 1px solid value(inputBorderColor);
  background-color: value(inputBackground);
  padding: 0 6px;
  outline: none;
  width: 100%;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.root:error::selection {
  border-color: value(R10); 
}

.root:disabled::selection {
  color: value(inputDisabledColor);
  border-color: value(inputDisabledBorderColor);
  cursor: default;
}

.root:disabled:hover::selection {
  background-color: value(inputBackground);
  border-color: value(inputDisabledHoverBorderColor);
}

.root:size(large)::label {
  height: value(largeHeight);
  line-height: calc(value(largeHeight) - 2px);
  font-size: value(largeFont);
}

.root:size(medium)::label {
  height: value(medHeight);
  line-height: calc(value(medHeight) - 2px);
  font-size: value(medFont);
}

.root:size(small)::label {
  height: value(smallHeight);
  line-height: calc(value(smallHeight) - 2px);
  font-size: value(smallFont);
}

.root::label {
  width: 100%;
  cursor: pointer;
  cursor: default;
}

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

.root::dropdownContent::dropdownOption {
  white-space: nowrap;
  padding: 8px 20px;
  text-overflow: ellipsis;
  font-size: 16px;
  color: value(D10);
  overflow: hidden;
}

.root::dropdownContent::dropdownOption:hovered {
  background: value(inputHover);
}

.root::dropdownContent::dropdownOption:selected {
  background: value(B10);
  color: value(WHITE);
}

.root::dropdownContent::dropdownOption:selected:hovered {
  background: value(B20);
  color: value(WHITE);
}

.root::dropdownContent::dropdownOption:disabled {
  color: value(D50);
}

.root::dropdownContent::dropdownOption:not(:selectable) {
  padding: 0;
}

.root::divider {
  background-color: value(D60);
  display: flex;
  flex: 1;
}

.root::divider:customDivider {
  padding: 8px 20px;
}

.arrowIcon {
  width: 24px;
  height: 24px;
  fill: value(inputBorderColor);
}

.root:disabled .arrowIcon {
  fill: value(inputDisabledBorderColor);
}

.root:disabled:hover .arrowIcon {
  fill: value(inputDisabledHoverBorderColor);
}