.fr-label + .fr-ds-combobox {
  // same as .fr-label + .fr-input
  margin-top: 0.5rem;
}

.fr-ds-combobox {
  .fr-autocomplete {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748Z'%3E%3C/path%3E%3C/svg%3E");

    &[aria-busy='true'] {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath d='M12,2A10,10,0,1,0,22,12,10,10,0,0,0,12,2Zm0,18a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z' fill='%23000' opacity='0.2'/%3E%3Cpath d='M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z' fill='%23000' stroke-width='0.5'%3E%3CanimateTransform attributeName='transform' type='rotate' dur='0.8s' repeatCount='indefinite' from='0 12 12' to='360 12 12'/%3E%3C/path%3E%3C/svg%3E");
    }
  }
}

.fr-ds-combobox__multiple {
  .fr-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-bottom: 0.5rem;
  }
}

.fr-ds-combobox__menu {
  &[data-placement='top'] {
    --origin: translateY(8px);
  }

  &[data-placement='bottom'] {
    --origin: translateY(-8px);
  }

  &[data-placement='right'] {
    --origin: translateX(-8px);
  }

  &[data-placement='left'] {
    --origin: translateX(8px);
  }

  &[data-entering] {
    animation: popover-slide 200ms;
  }

  &.fr-menu {
    width: var(--trigger-width);
    top: unset;

    .fr-menu__list {
      display: block;
      width: unset;
      max-height: 300px;
      overflow: auto;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
      padding: 2px 2px 0 2px !important;
      color: var(--text-default-blue-france);
    }

    .fr-menu__item {
      padding: 4px 8px;
      margin-bottom: 2px !important;
      background-color: var(--background-alt-blue-france);
      cursor: pointer;
      border: 1px solid transparent;

      &[data-selected],
      &[data-focused] {
        background-color: var(--background-alt-blue-france-hover);
        color: var(--text-action-high-blue-france);
      }

      &[data-selected] {
        border: 1px solid var(--border-plain-info);
      }
    }
  }
}

@keyframes popover-slide {
  from {
    transform: var(--origin);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@media (max-width: 62em) {
  .fr-ds-combobox__menu {
    &.fr-menu .fr-menu__list {
      z-index: calc(var(--ground) + 1000);
      background-color: var(--background-default-grey);
      --idle: transparent;
      --hover: var(--background-overlap-grey-hover);
      --active: var(--background-overlap-grey-active);
      filter: drop-shadow(var(--overlap-shadow));
      box-shadow: inset 0 1px 0 0 var(--border-open-blue-france);
    }
  }
}
