@use 'mixins/mixins' as *;
@use 'mixins/utils' as *;

@include b(dropdown) {
  color: getCssVarWebex('text', 'primary', 'normal');
}

@include b(dropdown-menu) {
  background-color: getCssVarWebex('background', 'solid', 'primary', 'normal');
  border-color: getCssVarWebex('outline', 'secondary', 'normal');
  color: getCssVarWebex('text', 'primary', 'normal');
  border-radius: getCssVarWebexCom('border', 'radius', 'core', 'medium');
  padding: getCssVarWebexCom('spacing', 'core', 'xx', 'small');
  @include e(item) {
    color: getCssVarWebex('text', 'primary', 'normal');
    border-radius: getCssVarWebexCom('border', 'radius', 'core', 'medium');
    &:not(.is-disabled):hover {
      color:getCssVarWebex('text', 'primary', 'normal');
      background-color: getCssVarWebex('background', 'primary', 'active');
    }
    &:not(.is-disabled):focus {
      outline: none;
      background-color: getCssVarWebex('background', 'primary', 'active');
      box-shadow: 0px 0px 0px 3px rgba(17, 112, 207, 0.3), 0px 0px 0px 2px getCssVarWebex('outline', 'theme', 'normal');
    }
    &.is-disabled {
      color:getCssVarWebex('text', 'primary', 'disabled');
      &:hover {
        background-color: getCssVarWebex('background', 'solid', 'primary', 'normal');
      }
    }
    &.selected {
      color:getCssVarWebex('text', 'primary', 'normal');
      background-color: getCssVarWebex('background', 'primary', 'hover');
      &.hover {
        color:getCssVarWebex('text', 'primary', 'normal');
        background-color: getCssVarWebex('background', 'primary', 'active');
      }
    }
    @include m(divided) {
      &:before {
        background-color: getCssVarWebex('outline', 'secondary', 'normal');
      }
    }
  }
}
.dropdown-selected {
  color: getCssVarWebex('control', 'active', 'normal');
}
