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

:import {
    -st-from: '../Foundation/stylable/colors.st.css';
    -st-named: D80, B30, B10, F00, B40, D20,B00
}

:import {
  -st-from: "wix-ui-core/dist/src/hocs/Focusable/Focusable.st.css";
  -st-default: Focusable;
}

.root {
  -st-extends: Focusable;
  -st-states: selected, disabled, skin(enum(dark, light));

  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 18px 0 20px;
  width: 100%;
  min-height: 32px;
  box-sizing: border-box;
  border: none;
  text-align: start;
}

.root:focus {
  outline: none;
}

.root:not(:disabled):focus-visible {
  box-shadow: inset 0 0 0 3px value(F00);
}

/* Basic */

.root:skin(dark) {
  background-color: #23263c;
  color: value(D80);
}

.root:skin(light) {
  background-color: value(D80);
  color: value(D20);
}

/* Selected */

.root:skin(dark):selected {
  background-color: #3b3f57;
  color: value(B10);
}

.root:skin(dark):selected .text {
  color: value(B10);
}

.root:skin(light):selected {
  background-color: value(B30);
  color: value(B00);
}

.root:skin(light):selected .text {
  color: value(B00);
}

/* Hovered */

.root:hover, .root:hover:selected:not(:disabled) {
  background-color: #2e3149;;
  cursor: pointer;
}

.root:skin(light):hover, .root:skin(light):hover:selected:not(:disabled) {
  background-color: value(B40);
}

/* Disabled */

.root:disabled {
  background-color: #23263c;
  pointer-events: none;
}

/* Others */

.text {
  flex: 1 1 auto;
  -st-extends: Text;
  display: block;
  word-break: break-word;
  margin: 7px 0 7px 0;
}

.suffix {
  display: flex;
  flex: 1 0 auto;
  justify-content: flex-end;
  min-width: 24px;
  max-width: 30%;
  margin-left: 6px;
}