$listbox-padding: 0.75rem;

pkt-listbox {
  display: contents;
}
.pkt-listbox {
  display: none;
  position: absolute;
  flex-direction: column;
  top: 100%;
  left: 0;
  width: 100%;
  visibility: hidden;
  overflow: hidden;
  list-style: none;
  margin: 0;
  overflow-y: auto;
  border: 2px solid var(--pkt-color-border-gray);
  background-color: white;
  max-height: 18rem;

  &.pkt-listbox__open {
    display: flex;
    visibility: visible;
    z-index: 4;
  }

  .pkt-listbox__options {
    padding: 0.25rem;
    margin: 0;
    list-style: none;
    flex-grow: 1;
    overflow-y: auto;
    @supports selector(:not(:has(*))) {
      &:not(:is(:has(*))) {
        display: none;
      }
    }
  }
  .pkt-listbox__option {
    margin: 0;
    padding: 0.75rem 20px;
    display: grid;
    grid-template-areas:
      'check label'
      '. description';
    grid-template-columns: min-content 1fr;
    align-items: center;
    column-gap: 0.25rem;

    &-label {
      grid-area: label;
    }

    pkt-icon[name='check-big'] {
      // fix for odd Safari 15 bug
      height: 1rem;
    }

    &-description {
      padding-top: 0.25rem;
      grid-area: description;
    }

    &:focus {
      padding: 10px 1.125rem;
      border: 2px solid var(--pkt-color-brand-warm-blue-1000);
      outline: 0.25rem solid var(--pkt-color-border-states-focus);
      text-decoration: none;
    }

    &--checkBox {
      grid-area: check;
      padding: 0.75rem 0.5rem 0.75rem 0.75rem;
      column-gap: 0.5rem;
      &:focus {
        padding-left: 10px;
      }
    }

    &--selected {
      padding-left: 0.25rem;
      &:focus {
        padding-left: 2px;
      }
    }

    &--highlighted {
      background-color: var(--pkt-color-surface-default-light-blue);
    }

    &[data-disabled] {
      cursor: not-allowed;
      color: var(--pkt-color-grays-gray-500);
    }
  }

  .pkt-listbox__option {
    margin-bottom: 0.125rem;
    overflow-wrap: break-word;
    hyphens: auto;
    cursor: pointer;

    &:first-child:not(.pkt-listbox__search, .pkt-listbox__banners) {
      margin-top: 0.125rem;
    }

    &:hover:not(.pkt-listbox__search) {
      background-color: var(--pkt-color-surface-default-light-blue);
    }
  }

  .pkt-listbox__banners {
    padding: 0.25rem;
    margin: 0;
    flex-grow: 0;
    flex-shrink: 1;
    @supports selector(:not(:has(*))) {
      &:not(:is(:has(*))) {
        display: none;
      }
    }
  }

  .pkt-listbox__banner {
    line-height: 1.5;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    width: 100%;
    box-sizing: border-box;

    &--new-option,
    &--user-message {
      background-color: var(--pkt-color-surface-default-gray);
    }

    &--maximum-reached {
      background-color: var(--pkt-color-brand-light-beige-1000);
    }

    &-icon {
      height: 1.5rem;
      width: 1.5rem;
    }
  }

  .pkt-listbox__search {
    display: flex;
    align-items: center;
    padding: 0.375rem;
    width: 100%;
    box-sizing: border-box;
    background-color: var(--pkt-color-surface-default-gray);

    &:focus-visible,
    &:focus,
    &:active {
      border: none;
      outline: none;
    }

    &:focus-within,
    &:active {
      padding: 0.25rem;
      border: 2px solid var(--pkt-color-brand-warm-blue-1000);
      outline: 0.25rem solid var(--pkt-color-border-states-focus);
      input {
        outline: none;
      }
    }

    &-icon {
      cursor: default;
      display: flex;
      align-items: center;
      padding-right: 0.25rem;

      .pkt-icon {
        width: 1.25rem;
        height: 1.25rem;
      }
    }

    input {
      background-color: var(--pkt-color-surface-default-gray);
      border: none;
      color: var(--pkt-color-text-body-default);
      padding: 0.75rem 0.75rem 0.75rem 0.5rem;
      line-height: inherit;
      width: 100%;
      box-sizing: border-box;
      margin: 0;

      &::placeholder {
        color: var(--pkt-color-text-body-default);
      }
    }
  }
}