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

@component-namespace el {

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

      @when disabled {
        color: var(--select-option-disabled-color);
        cursor: not-allowed;

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

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

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

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

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