@st-namespace 'Picker-st-css';
@st-import [ --wix-color-5 ] from '@wix/tpa-style-webpack-plugin/stylable-variables.st.css';
@st-import [ createFont, setColor, setFont ] from '../../common/formatters.st';
@st-import Text from '../Text/Text.st.css';
@st-import IconButton from '../IconButton/IconButton.st.css';

/*
 * Main color
 * @type color
 */
@property st-global(--wix-ui-tpa-picker-main-color);

/*
 * Font style
 * @type size
 */
@property st-global(--wix-ui-tpa-picker-font-style);

.root {
  width: 12.6em;
  -st-mixin: createFont(--wix-ui-tpa-picker-font-style, 'Body-M', '{ "size": "20px", "line-height": "28px" }');
  margin: auto;
  text-align: center;
  display: flex;
  justify-content: space-between;
}

.value {
  -st-extends: Text;
  -st-mixin: setColor(--wix-ui-tpa-text-main-text-color, --wix-ui-tpa-picker-main-color, var(--wix-color-5)),
  setFont(--wix-ui-tpa-text-main-text-font, --wix-ui-tpa-picker-font-style, 'Body-M', '{ "size": "20px", "line-height": "28px" }');
  min-width: 207px;
}

.arrow {
  -st-extends: IconButton;
  -st-mixin:
    setColor(--wix-ui-tpa-icon-button-icon-color, --wix-ui-tpa-picker-main-color, var(--wix-color-5));
  font-size: inherit;
}

.arrow::icon svg {
  width: 1.2em;
  height: 1.2em;
  margin: 0.15em;
}

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