@use '../abstracts/functions';

$listbox-padding: 0.75rem;

pkt-listbox {
  display: contents;
}
.pkt-listbox {
  --pkt-listbox-option-bg-highlight: #{functions.color-token('surface-default-light-blue')};

  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: var(--pkt-color-input-background-normal);
  color: var(--pkt-color-input-text-normal);
  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'],
    .pkt-icon[name='check-big'] {
      // fix for odd Safari 15 bug
      height: 1rem;
      --fg-color: currentColor;
    }

    &-description {
      padding-block-start: 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-inline-start: 10px;
      }
    }

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

    &--highlighted {
      background-color: var(--pkt-listbox-option-bg-highlight);
    }

    &[data-disabled] {
      cursor: not-allowed;
      color: var(--pkt-color-brand-neutrals-600);
    }
  }

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

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

    &:hover:not(.pkt-listbox__search) {
      background-color: var(--pkt-listbox-option-bg-highlight);
    }

    &--highlighted,
    &:hover:not(.pkt-listbox__search) {
      &:not([data-disabled]) {
        color: functions.color-token('text-body-dark');
        --pkt-color-input-check-border: #{functions.color-token('text-body-dark')};
        --pkt-color-input-border-normal: #{functions.color-token('text-body-dark')};

        [data-mode='dark'] & {
          --pkt-color-input-check-background: var(--pkt-listbox-option-bg-highlight);
        }

        .pkt-input-check__input-checkbox:not([role='switch']):after {
          background-color: functions.color-token('brand-neutrals-white');
        }
      }
    }
  }

  .pkt-listbox__empty {
    padding: $listbox-padding;
    color: functions.color-token('text-placeholder');
    list-style: none;
  }

  .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;
    color: functions.color-token('text-body-default');
    --fg-color: currentColor;

    &--new-option,
    &--maximum-reached {
      background-color: var(--pkt-color-surface-strong-default);
    }

    &--user-message,
    &--empty {
      background-color: var(--pkt-color-surface-default-gray);
      color: functions.color-token('text-body-dark');
    }

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

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

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

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

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

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

    input {
      background-color: var(--pkt-color-input-background-normal);
      border: none;
      color: var(--pkt-color-input-text-normal);
      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-placeholder);
      }
    }
  }
}