@use '../../styles/mixins' as *;
@use '../../styles/variables' as *;
@use 'sass:color';

.ui-dropdown {
  $self: &;

  position: relative;
  display: inline-flex;

  &__overlay {
    position: fixed;
    z-index: 6999;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    transition: background-color .2s ease-out;

    &.is-active {
      background-color: color.change($clr-black, $alpha: 0.15);
    }
  }

  &__popper {
    min-width: 170px;
    z-index: 7000;
  }

  &__dropdown {
    //overflow: hidden;
    border-radius: 12px;
    background-color: $clr-white;
    list-style: none;
    padding: 0;
    margin: 0;

    &::-webkit-scrollbar {
      display: none;
    }
  }
}

.ui-dropdown-item {
  @include txt-m-m('dropdown-item');

  display: flex;
  align-items: center;
  padding: var(--dropdown-item-padding, 12px 16px);
  background-color: $clr-white;
  transition: background-color .2s ease-out;
  cursor: pointer;
  user-select: none;
  border-radius: 8px;
  outline: none;

  &:hover,
  &:focus {
    background-color: $clr-grey-200;
  }

  &:active,
  &.is-active {
    background-color: $clr-grey-300;
  }

  &__icon {
    margin-right: 8px;
  }
}

.ui-dropdown-separator {
  height: 1px;
  width: 100%;
  background-color: $clr-grey-200;
  margin-block: 12px;
}