@use 'sass:map';
@use 'sass:color';

@use 'common/var.scss'as *;
@use 'mixins/mixins'as *;

#{getClassName((dropdown))} {
  display: inline-flex;
  cursor: pointer;
}
#{getClassName((dropdown, btn))} {
  display:flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}
#{getClassName((dropdown, card))} {
  @include set-popper-card();
}

#{getClassName((dropdown, ul))} {
  list-style: none;margin:0;padding: 0;
  li {
    list-style: none;margin:0;padding: 0;
    transition: all .2s;
    &:hover {
      background-color: color.adjust(map.get($colors, primary, base), $alpha: -0.92);
    }
    &.is-disabled {
      opacity: .6;
      cursor: not-allowed;
      &:hover {
        background-color: transparent;
      }
    }
    &.is-active {
      font-weight: bold;
      color: #{getValName((color, primary))};
    }
  }
  &.is-scroll {
    max-height: #{getValName((dropdown, max-height))};
    overflow: auto;
  }
}
#{getClassName((dropdown, li, slot))} {
  padding: .3em 1em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  white-space: nowrap;
}