@use '../../helpers';
@use '../../mixins';
@use '../icon/icon';
@use '../option-list/option-list';
@use '../popover/popover';

@mixin Combobox() {
  @include icon.Icon();
  @include option-list.OptionList();
  @include popover.Popover();

  @if not mixins.includes('Combobox') {
    @include _Combobox();
  }
}

@mixin _Combobox() {
  $border-width: 1px;

  .ods-combobox {
    align-items: center;
    box-sizing: border-box;
    display: inline-flex;
    max-width: helpers.space(50);
    position: relative;
    width: 100%;

    > * {
      box-sizing: inherit;
    }

    > .ods-input {
      overflow: hidden;
      padding-right: helpers.space(6);
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    > .ods-icon {
      pointer-events: none;
      position: absolute;
      right: helpers.space(1.5);
      transition: transform helpers.time(1) ease;
    }

    &.-open > .ods-icon {
      transform: rotateX(180deg);
    }
  }

  .ods-popover.ods-combobox-dropdown {
    --popover-gap: #{helpers.space(0.125)};
    width: 100%;
  }

  .ods-option-content.-empty {
    @include helpers.font('300-regular');

    color: helpers.color('content-disabled');

    &:not(:first-child) {
      display: none;
    }
  }
}