:host {
  --pos-navigation-bar-height: var(--size-10);
}

search {
  position: relative;
}

.suggestions ol {
  border: 1px solid var(--pos-border-color);
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.suggestions {
  width: 100%;
  overflow-y: auto;
  max-height: 90dvh;
  li {
    padding: 1rem;
    background-color: var(--pos-background-color);
    pos-rich-link {
      --background-color: inherit;
    }
    &[aria-selected='true'] {
      background-color: var(--pos-primary-color);
      &:hover {
        background-color: var(--pos-primary-color);
      }
    }
    &:hover {
      background-color: var(--pos-border-color);
    }
  }
}

.suggestions li.selected pos-rich-link {
  --label-color: white;
  --description-color: var(--pos-border-color);
  --uri-color: var(--pos-subtle-text-color);
}

dialog {
  position: absolute;
  margin-top: calc(-1 * var(--pos-navigation-bar-height));
  padding: 0;
  width: 100%;
  max-width: 100%;
  min-width: 100%;
  overflow: hidden;
  max-height: 100dvh;
  background-color: var(--pos-background-color);
  color: var(--pos-normal-text-color);
  border: var(--pos-border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  form {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    align-items: center;
    input {
      display: flex;
      font-size: var(--scale-1);
      height: var(--pos-navigation-bar-height);
      border-top-left-radius: var(--radius-md);
      border-top-right-radius: var(--radius-md);
      padding-left: var(--size-2);
      width: 100%;
      border: none;
      outline: none;
      color: var(--pos-normal-text-color);
      background-color: var(--pos-input-background-color);
      box-sizing: border-box;
    }
  }
}

dialog[open] {
  display: flex;
  z-index: var(--layer-top);
  animation: slideIn 100ms ease-out;
}

@media (max-width: 640px) {
  search {
    position: unset;
  }
  dialog {
    margin-top: var(--size-1);
    top: 0;
    width: 95dvw;
    max-width: unset;
    min-width: unset;
    form {
      input {
        height: var(--size-12);
        font-size: var(--scale-fluid-3);
      }
    }
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}