text: :import {
    -st-from: "../Foundation/stylable/colors.st.css";
    -st-named: THEME-COLOR-10, THEME-COLOR-20, THEME-COLOR-50, D10, D20, D50, D60, D70, D80;
  }
  
  :import {
    -st-from: "../Foundation/stylable/mixins/calc.js";
    -st-default: calc;
  }
  
  :import {
    -st-from: "../Foundation/stylable/shadows.st.css";
    -st-named: shadow30;
  }
  
  :import {
    -st-from: "../Foundation/stylable/typography.st.css";
    -st-named: heading-h6, text-medium-normal;
  }
  
  :import {
    -st-from: '../Foundation/stylable/default-scroll-bar.st.css';
    -st-named: defaultScrollBar;
  }
  
  :vars {
    option_height: 35px;
    big_option_height: 47px;
    content_container_height: 260px;
    top-arrow-size: 8px;
    arrowUpShadow: 3px 3px 8px rgba(0, 0, 0, .1);
    arrowDownShadow: -3px -3px 8px rgba(0, 0, 0, .1);
  }
  
  .root {
    -st-states: visible, withArrow, containerStyles, direction(enum(up, down));
    box-sizing: border-box;
    position: relative;
    outline: none;
    border: none;
    width: 100%;
    display: flex;
    justify-content: center;
  }
  
  .root * {
    box-sizing: border-box;
  }
  
  .contentContainer {
    background: value(D80);
    border: none;
    display: none;
    opacity: 0;
    height: 0;
    padding: 0;
    transition: opacity 0.2s ease;
    width: 100%;
    z-index: 6;
    left: 0;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  
  .root:containerStyles .contentContainer{
    border-radius: 8px;
    box-shadow: value(shadow30);
    position: absolute;
  }
  
  .root:visible .contentContainer {
    display: flex;
    flex-direction: column;
    height: auto;
    overflow: auto;
    opacity: 1;
  }
  
  .root:visible:withArrow .contentContainer {
    padding: 10px 0;
  }
  
  .root:visible:containerStyles:direction(up)  .contentContainer{
    bottom: 0;
    margin-top: 15px;
  }
  
  .root:visible:containerStyles:withArrow:direction(up) .contentContainer{
    margin-bottom: value(top-arrow-size);
  }
  
  .root:visible:containerStyles:direction(down) .contentContainer {
    top: 0;
    margin-bottom: 15px;
  }
  
  .root:visible:containerStyles:withArrow:direction(down) .contentContainer {
    margin-top: value(top-arrow-size);
  }
  
  .options {
    -st-mixin: defaultScrollBar;
    position: relative;
    overflow: auto;
  }
  
  .option {
    -st-states: selected, hovered, disabled, title, itemHeight(enum(small, big)), overrideStyle;
    -st-mixin: text-medium-normal;
    color: value(D10);
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    padding: 6px 20px 6px 24px;
    cursor: pointer;
    width: 100%;
    display: flex;
    align-items: center;
  }
  
  .option:overrideStyle {
    padding: 0;
  }
  
  .option:itemHeight(small):not(:overrideStyle) {
    min-height: value(option_height);
  }
  
  .option:itemHeight(big):not(:overrideStyle) {
    min-height: value(big_option_height);
  }
  
  .option:disabled {
    color: value(D50);
    cursor: default;
  }
  
  .option:title{
    -st-mixin: heading-h6;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    background: value(D70);
    color: value(D20);
  }
  
  :global(.rtl) .option, :global([dir='rtl']) .option{
    text-align: right;
    direction: rtl;
    padding-right: 24px;
    padding-left: 24px;
  }
  
  .option:hovered {
    background: value(THEME-COLOR-50);
    color: value(D10);
  }
  
  .option:focus {
    outline: none;
  }
  
  .option:selected {
    background-color: value(THEME-COLOR-10);
    color: value(D80);
  }
  
  .option:selected:hovered {
    background-color: value(THEME-COLOR-20);
    color: value(D80);
  }
  
  .arrow {
    position: absolute;
    left: 50%;
    z-index: 10;
    transform: translateX(-50%) rotateZ(45deg);
    height: value(top-arrow-size);
    width: value(top-arrow-size);
    background: value(D80);
  }
  
  .root:direction(up) .arrow {
    bottom: calc(value(top-arrow-size) / 2);
    box-shadow: value(arrowUpShadow);
  }
  
  .root:direction(down) .arrow {
    top: calc(value(top-arrow-size) / 2);
    box-shadow: value(arrowDownShadow);
  }
  
  .loader {
    display: flex;
    justify-content: center;
    padding-bottom: 24px;
  }
  
  .linkItem{
    text-decoration: none;
  }
  
  .divider {
    height: 1px;
    overflow: hidden;
    background-color: value(D60);
    margin: 0;
  }
  