@oslokommune/punkt-css/dist/css/components/combobox.css

CSS-rammeverket til Punkt, et designsystem laget av Oslo Origo

pkt-combobox {
  display: block;
  max-width: 31rem;
  width: 100%;
}
pkt-combobox[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;
  height: 100%;
  min-width: 1.125rem;
  min-height: 1.125rem;
  transform: rotate(0deg);
  transition: transform 1s linear;
  padding: 0.5rem;
}
.pkt-combobox__wrapper .pkt-combobox__arrow.pkt-btn svg {
  transition: transform 0.1s ease-in-out;
  width: 1.125rem;
  height: 1.125rem;
}
.pkt-combobox__wrapper .pkt-combobox__arrow.pkt-btn-icon {
  transform: rotate(0deg);
  transition: transform 0.3s ease;
}
.pkt-combobox__wrapper .pkt-combobox__arrow.pkt-btn-icon--open {
  transform: rotate(180deg);
  transition: transform 0.3s ease;
}
.pkt-combobox__wrapper .pkt-combobox__arrow.pkt-btn:hover:not([data-disabled]) {
  background-color: inherit;
  border-color: transparent;
}
.pkt-combobox__wrapper .pkt-combobox__arrow.pkt-btn:hover:not([data-disabled]) svg {
  transform: translateY(0.25rem);
}
.pkt-combobox__wrapper .pkt-combobox__input {
  display: flex;
  align-items: center;
  position: relative;
  margin: 0;
  padding: 0.375rem 2rem 0.375rem 0.375rem;
  border: 2px solid var(--pkt-color-border-default);
  min-height: 2.75rem;
  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--fullwidth {
  width: 100%;
}
.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-brand-warm-blue-1000);
  outline: none;
}
.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-surface-default-gray);
  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: inherit;
  padding: 0;
  margin: 0;
  width: 0;
}
.pkt-combobox__wrapper .pkt-combobox__input input:focus, .pkt-combobox__wrapper .pkt-combobox__input input:active {
  width: auto;
  outline: none;
}
.pkt-combobox__wrapper .pkt-combobox__input .pkt-tag {
  margin: 0;
}
.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__placeholder {
  color: var(--pkt-color-text-placeholder);
  opacity: 1;
}
.pkt-combobox__wrapper .pkt-listbox__open {
  margin-top: 0.5rem;
}