@charset "UTF-8";
@import "./common/var.css";
@import './mixins/common.css';

@component-namespace el {

  @b select-dropdown {
    @e item {
      font-size: var(--select-font-size);
      padding: 8px 10px;
      position: relative;
      color: var(--select-option-color);
      height: var(--select-option-height);
      line-height: 1.5;
      box-sizing: border-box;
      cursor: pointer;
      outline: none;
      span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      @when disabled {
        color: var(--select-option-disabled-color);
        cursor: not-allowed;

        &:hover {
          background-color: var(--color-white);
        }
      }

      &.hover, &:hover {
        background-color: var(--select-option-hover-background);
      }
      &.focus {
         /*-webkit-box-shadow: inset 0 0 2px 2px rgba(7,193,245,1);*/
         /*box-shadow: inset 0 0 2px 2px rgba(7,193,245,1);*/
         /*outline: none;*/
         /*-webkit-transition: -webkit-box-shadow .15s ease-in;*/
         /*transition: -webkit-box-shadow .15s ease-in;*/
         /*transition: box-shadow .15s ease-in;*/
         /*transition: box-shadow .15s ease-in,-webkit-box-shadow .15s ease-in;*/
         outline: auto -webkit-focus-ring-color;
        }

      &.selected {
        background-color: var(--select-option-selected);

        &.hover {
          background-color: var(--select-option-selected-hover);
        }
      }

      & span {
        line-height: 1.5 !important;
      }
    }
  }
}
