packages/styles/scss/components/_autocomplete.scss

   1 .autocomplete-suggestions {
   2         position: absolute;
   3         z-index: -1;
   4         inset-block-start: calc(100% - 2px);
   5         inset-inline: 0.35em;
   6         min-block-size: 80%;
   7         max-block-size: calc(5 * 2.3em);
   8         overflow: scroll;
   9         background-color: var(--background-norm);
  10         box-shadow: var(--shadow-lifted);
  11         color: var(--text-norm);
  12         border: 1px solid var(--border-norm);
  13         transform: translateY(-1.5em);
  14         opacity: 0;
  15         transition: transform 100ms ease-in, opacity 100ms ease-out 20ms;
  16
  17         &,
  18         div:last-child {
  19                 border-end-start-radius: var(--border-radius-md);
  20                 border-end-end-radius: var(--border-radius-md);
  21         }
  22
  23         div {
  24                 @extend .interactive-pseudo;
  25
  26                 &.selected {
  27                         background-color: var(--interaction-norm);
  28                         color: var(--interaction-norm-contrast);
  29                         pointer-events: none;
  30                 }
  31         }
  32
  33         .button.button-link {
  34                 color: inherit;
  35         }
  36
  37         &--open {
  38                 transform: translateY(0);
  39                 opacity: 1;
  40         }
  41 }
  42
  43 .autocomplete-input {
  44         z-index: 1;
  45 }