pkt-combobox {
  display: block;
}

.pkt-combobox-component {
  display: block;
  max-width: 31rem;
  width: 100%;
}
.pkt-combobox-component--fullwidth {
  max-width: 100%;
}

.pkt-combobox__wrapper {
  position: relative;
  width: 100%;
}
.pkt-combobox__wrapper .pkt-combobox {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
}
.pkt-combobox__wrapper .pkt-combobox__arrow.pkt-btn {
  position: absolute;
  right: 0.25rem;
  height: 100%;
  min-width: 1.125rem;
  min-height: 1.125rem;
  padding: 0.5rem;
}
.pkt-combobox__wrapper .pkt-combobox__arrow.pkt-btn svg {
  width: 1.5rem;
  height: 1.5rem;
}
.pkt-combobox__wrapper .pkt-combobox__arrow.pkt-btn:hover:not([data-disabled]) {
  background-color: inherit;
  border-color: transparent;
}
.pkt-combobox__wrapper .pkt-combobox__value {
  padding-inline-start: 0.5rem;
}
.pkt-combobox__wrapper .pkt-combobox__input {
  display: flex;
  align-items: center;
  position: relative;
  margin: 0;
  padding: 0.5rem 2rem 0.5rem 0.5rem;
  background-color: var(--pkt-color-input-background-normal);
  border: 2px solid var(--pkt-color-input-border-normal);
  color: var(--pkt-color-input-text-normal);
  min-height: 3rem;
  gap: 0.375rem;
  flex-wrap: wrap;
  letter-spacing: -0.2px;
  font-weight: 300;
  font-size: 1.125rem;
  line-height: 1.75rem;
  line-height: 1.25;
}
.pkt-combobox__wrapper .pkt-combobox__input-div {
  display: contents;
}
.pkt-combobox__wrapper .pkt-combobox__input--fullwidth {
  width: 100%;
}
.pkt-combobox__wrapper .pkt-combobox__input--small {
  min-height: 2.625rem;
  padding: 0.375rem 2.5rem 0.375rem 0.375rem;
  letter-spacing: -0.2px;
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.5rem;
}
.pkt-combobox__wrapper .pkt-combobox__input--small .pkt-combobox__arrow-icon svg {
  width: 1.25rem;
  height: 1.25rem;
}
.pkt-combobox__wrapper .pkt-combobox__input--xsmall {
  min-height: 2.25rem;
  padding: 0.25rem 2.25rem 0.25rem 0.25rem;
  letter-spacing: -0.2px;
  font-weight: 300;
  font-size: 0.875rem;
  line-height: 1.375rem;
}
.pkt-combobox__wrapper .pkt-combobox__input--xsmall .pkt-combobox__arrow-icon {
  padding: 0.25rem 0.5rem;
}
.pkt-combobox__wrapper .pkt-combobox__input--xsmall .pkt-combobox__arrow-icon svg {
  width: 1.125rem;
  height: 1.125rem;
}
.pkt-combobox__wrapper .pkt-combobox__input:hover:not(.pkt-combobox__wrapper .pkt-combobox__input--disabled):not(.pkt-combobox__wrapper .pkt-combobox__input--error) {
  border-color: var(--pkt-color-input-border-hover);
}
.pkt-combobox__wrapper .pkt-combobox__input:hover:not(.pkt-combobox__wrapper .pkt-combobox__input--disabled):not(.pkt-combobox__wrapper .pkt-combobox__input--error) > .pkt-combobox__value {
  color: var(--pkt-color-input-text-hover);
}
.pkt-combobox__wrapper .pkt-combobox__input:hover:not(.pkt-combobox__wrapper .pkt-combobox__input--disabled):not(.pkt-combobox__wrapper .pkt-combobox__input--error) .pkt-combobox__arrow-icon {
  --fg-color: var(--pkt-color-input-text-hover);
}
.pkt-combobox__wrapper .pkt-combobox__input:hover:not(.pkt-combobox__wrapper .pkt-combobox__input--disabled):not(.pkt-combobox__wrapper .pkt-combobox__input--error) .pkt-combobox__arrow-icon:not(.pkt-combobox__arrow-icon--open) svg {
  transform: translateY(0.25rem);
}
.pkt-combobox__wrapper .pkt-combobox__input--error, .pkt-combobox__wrapper .pkt-combobox__input--error:hover, .pkt-combobox__wrapper .pkt-combobox__input--error:focus, .pkt-combobox__wrapper .pkt-combobox__input--error:focus-within {
  border-color: var(--pkt-color-brand-red-1000);
}
.pkt-combobox__wrapper .pkt-combobox__input:focus, .pkt-combobox__wrapper .pkt-combobox__input:focus-within, .pkt-combobox__wrapper .pkt-combobox__input:focus-visible, .pkt-combobox__wrapper .pkt-combobox__input--open {
  border-color: var(--pkt-color-input-border-active);
  outline: 2px solid var(--pkt-color-input-border-active);
}
.pkt-combobox__wrapper .pkt-combobox__input--disabled, .pkt-combobox__wrapper .pkt-combobox__input--disabled:hover, .pkt-combobox__wrapper .pkt-combobox__input--disabled:focus, .pkt-combobox__wrapper .pkt-combobox__input--disabled:focus-within {
  background-color: var(--pkt-color-input-background-disabled);
  border-color: var(--pkt-color-border-states-disabled);
  color: var(--pkt-color-text-action-disabled);
  cursor: inherit;
}
.pkt-combobox__wrapper .pkt-combobox__input input {
  border: none;
  font-size: inherit;
  font-family: inherit;
  font-weight: inherit;
  color: inherit;
  background: transparent;
  letter-spacing: inherit;
  line-height: 1.4rem;
  padding: 0 0 0 0.5rem;
  margin: 0;
  flex: 1;
  min-width: 3rem;
}
.pkt-combobox__wrapper .pkt-combobox__input input::placeholder {
  color: var(--pkt-color-text-placeholder);
  opacity: 1;
}
.pkt-combobox__wrapper .pkt-combobox__input input:focus, .pkt-combobox__wrapper .pkt-combobox__input input:active {
  outline: none;
}
.pkt-combobox__wrapper .pkt-combobox__input .pkt-tag {
  margin: 0;
}
.pkt-combobox__wrapper .pkt-combobox__tag-list {
  display: contents;
  list-style: none;
  margin: 0;
  padding: 0;
}
.pkt-combobox__wrapper .pkt-combobox__tag-list li {
  display: contents;
}
.pkt-combobox__wrapper .pkt-combobox__arrow-icon {
  position: absolute;
  right: 0.25rem;
  min-width: 1.125rem;
  min-height: 1.125rem;
  padding: 0.5rem;
  --fg-color: currentColor;
  transform: rotate(0deg);
  transition: transform 0.3s ease;
  pointer-events: none;
}
.pkt-combobox__wrapper .pkt-combobox__arrow-icon svg {
  width: 1.5rem;
  height: 1.5rem;
  transition: transform 0.1s ease-in-out;
}
.pkt-combobox__wrapper .pkt-combobox__arrow-icon--open {
  transform: rotate(180deg);
  transition: transform 0.3s ease;
}
.pkt-combobox__wrapper .pkt-combobox__tags-outside {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}
.pkt-combobox__wrapper .pkt-combobox__tags-outside .pkt-tag {
  margin: 0;
}
.pkt-combobox__wrapper .pkt-combobox__tags-outside .pkt-combobox__tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.pkt-combobox__wrapper .pkt-combobox__tags-outside .pkt-combobox__tag-list li {
  display: contents;
}
.pkt-combobox__wrapper .pkt-combobox__placeholder {
  color: var(--pkt-color-text-placeholder);
  opacity: 1;
  padding-inline-start: 0.5rem;
}
.pkt-combobox__wrapper .pkt-listbox__open {
  margin-block-start: 0.5rem;
}
.pkt-combobox__wrapper.pkt-inputwrapper:not([data-navtype=pointer]) .pkt-combobox__input:focus-within {
  outline: 4px solid var(--pkt-color-border-states-focus);
}
.pkt-combobox__wrapper.pkt-inputwrapper--small .pkt-listbox .pkt-listbox__option:not(.pkt-listbox__search), .pkt-combobox__wrapper.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__option:not(.pkt-listbox__search) {
  padding: 0.5rem 1rem;
  letter-spacing: -0.2px;
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.5rem;
}
.pkt-combobox__wrapper.pkt-inputwrapper--small .pkt-listbox .pkt-listbox__empty,
.pkt-combobox__wrapper.pkt-inputwrapper--small .pkt-listbox .pkt-listbox__banner, .pkt-combobox__wrapper.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__empty,
.pkt-combobox__wrapper.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__banner {
  padding: 0.5rem 1rem;
  letter-spacing: -0.2px;
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.5rem;
}
.pkt-combobox__wrapper.pkt-inputwrapper--small .pkt-listbox .pkt-listbox__search input, .pkt-combobox__wrapper.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__search input {
  padding: 0.5rem 0.75rem;
  letter-spacing: -0.2px;
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.5rem;
}
.pkt-combobox__wrapper.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__option:not(.pkt-listbox__search) {
  padding: 0.375rem 0.75rem;
  letter-spacing: -0.2px;
  font-weight: 300;
  font-size: 0.875rem;
  line-height: 1.375rem;
}
.pkt-combobox__wrapper.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__empty,
.pkt-combobox__wrapper.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__banner {
  padding: 0.375rem 0.75rem;
  letter-spacing: -0.2px;
  font-weight: 300;
  font-size: 0.875rem;
  line-height: 1.375rem;
}
.pkt-combobox__wrapper.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__banner-icon,
.pkt-combobox__wrapper.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__search-icon .pkt-icon {
  width: 1.125rem;
  height: 1.125rem;
}
.pkt-combobox__wrapper.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__search input {
  padding: 0.375rem 0.5rem;
  letter-spacing: -0.2px;
  font-weight: 300;
  font-size: 0.875rem;
  line-height: 1.375rem;
}