@use '_variables' as *;
@use '_mixins' as *;
@use '_form-mixins' as *;

.input-group {
  width: fit-content;
}

.dropdown-item {
  font-size: 14px;
}

input {
  @include peertube-input-text(250px);
}

.has-icon input {
  padding-inline-start: 46px;
}

.search-button {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 20px;
  color: pvar(--fg-200);

  my-global-icon {
    @include global-icon-size(19px);
  }
}

.input-group-text {
  background-color: transparent;
  transition: 0.3s ease-out;

  &:hover {
    background-color: pvar(--input-bg);
  }
}

.form-control-clear my-global-icon {
  @include global-icon-size(19px);
}

div[role=menu] my-global-icon {
  $size: 19px;
  $margin: 2px;

  opacity: 1;

  @include global-icon-size($size);
  @include margin-right($margin);

  &.no-visible {
    width: 0;
    height: 0;

    @include margin-right($size + $margin);
  }
}



div[role=menu] {
  max-height: 50vh;
  overflow: auto;
}
