@oslokommune/punkt-css/dist/css/pkt-elements.css

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

/* Button element!
 *
 * Size: small, medium, large
 * Skin: primary, secondary, tertiary
 * State: normal, focus, hover, active, disabled
 * Variant: label-only, icon-left, icon-right, icon-only
 * Background: light, dark
 */
/* 
 * Accessibility
 * https://kittygiraudel.com/2016/10/13/css-hide-and-seek/#undesirable-overflows-18012019
 */
.pkt-btn--icon-only .pkt-btn__text {
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  -webkit-clip-path: inset(50%) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  overflow: hidden !important;
  margin: -1px !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important;
}

.pkt-btn__icon svg {
  --ring-color: var(--pkt-color-brand-dark-blue-700);
  --spinner-color: var(--pkt-color-brand-blue-1000);
}
[data-mode=dark] .pkt-btn__icon svg {
  --ring-color: var(--pkt-color-brand-neutrals-white);
  --spinner-color: var(--pkt-color-brand-dark-blue-1000);
}

.pkt-btn {
  --pkt-color-button-background-normal: var(--pkt-color-brand-dark-blue-1000);
  --pkt-color-button-border-normal: var(--pkt-color-brand-dark-blue-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
  --pkt-color-button-background-focus: var(--pkt-color-brand-warm-blue-1000);
  --pkt-color-button-border-focus: var(--pkt-color-brand-warm-blue-1000);
  --pkt-color-button-text-focus: var(--pkt-color-brand-neutrals-white);
  --pkt-color-border-states-focus: var(--pkt-color-brand-purple-1000);
  --pkt-color-button-background-hover: var(--pkt-color-brand-warm-blue-1000);
  --pkt-color-button-border-hover: var(--pkt-color-brand-warm-blue-1000);
  --pkt-color-button-text-hover: var(--pkt-color-brand-neutrals-white);
  --pkt-color-button-background-active: var(--pkt-color-brand-warm-blue-1000);
  --pkt-color-button-border-active: var(--pkt-color-brand-warm-blue-1000);
  --pkt-color-button-text-active: var(--pkt-color-brand-neutrals-white);
  --pkt-color-button-background-disabled: var(--pkt-color-brand-neutrals-100);
  --pkt-color-button-border-disabled: var(--pkt-color-brand-neutrals-100);
  --pkt-color-button-text-disabled: var(--pkt-color-grays-gray-500);
}

[data-mode=dark] .pkt-btn {
  --pkt-color-button-background-normal: var(--pkt-color-brand-blue-500);
  --pkt-color-button-border-normal: var(--pkt-color-brand-blue-500);
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
  --pkt-color-button-background-focus: var(--pkt-color-brand-blue-1000);
  --pkt-color-button-border-focus: var(--pkt-color-brand-blue-1000);
  --pkt-color-button-text-focus: var(--pkt-color-brand-dark-blue-1000);
  --pkt-color-border-states-focus: var(--pkt-color-brand-purple-1000);
  --pkt-color-button-background-hover: var(--pkt-color-brand-blue-1000);
  --pkt-color-button-border-hover: var(--pkt-color-brand-blue-1000);
  --pkt-color-button-text-hover: var(--pkt-color-brand-dark-blue-1000);
  --pkt-color-button-background-active: var(--pkt-color-brand-blue-1000);
  --pkt-color-button-border-active: var(--pkt-color-brand-blue-1000);
  --pkt-color-button-text-active: var(--pkt-color-brand-dark-blue-1000);
  --pkt-color-button-background-disabled: var(--pkt-color-brand-neutrals-100);
  --pkt-color-button-border-disabled: var(--pkt-color-brand-neutrals-100);
  --pkt-color-button-text-disabled: var(--pkt-color-grays-gray-600);
}
[data-mode=dark] .pkt-btn--green-dark {
  --pkt-color-button-background-normal: var(--pkt-color-brand-dark-green-1000);
  --pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
}
[data-mode=dark] .pkt-btn--green-dark-outline {
  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
  --pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
}
[data-mode=dark] .pkt-btn--green {
  --pkt-color-button-background-normal: var(--pkt-color-brand-green-1000);
  --pkt-color-button-border-normal: var(--pkt-color-brand-green-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
}
[data-mode=dark] .pkt-btn--green-outline {
  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
  --pkt-color-button-border-normal: var(--pkt-color-brand-green-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
}
[data-mode=dark] .pkt-btn--blue {
  --pkt-color-button-background-normal: var(--pkt-color-brand-blue-1000);
  --pkt-color-button-border-normal: var(--pkt-color-brand-blue-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
}
[data-mode=dark] .pkt-btn--blue-outline {
  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
  --pkt-color-button-border-normal: var(--pkt-color-brand-blue-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
}
[data-mode=dark] .pkt-btn--beige-light {
  --pkt-color-button-background-normal: var(--pkt-color-brand-light-beige-1000);
  --pkt-color-button-border-normal: var(--pkt-color-brand-light-beige-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
}
[data-mode=dark] .pkt-btn--beige-dark-outline {
  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
  --pkt-color-button-border-normal: var(--pkt-color-brand-dark-beige-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
}
[data-mode=dark] .pkt-btn--yellow {
  --pkt-color-button-background-normal: var(--pkt-color-brand-yellow-1000);
  --pkt-color-button-border-normal: var(--pkt-color-brand-yellow-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
}
[data-mode=dark] .pkt-btn--yellow-outline {
  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
  --pkt-color-button-border-normal: var(--pkt-color-brand-yellow-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
}
[data-mode=dark] .pkt-btn--red {
  --pkt-color-button-background-normal: var(--pkt-color-brand-red-1000);
  --pkt-color-button-border-normal: var(--pkt-color-brand-red-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
}
[data-mode=dark] .pkt-btn--red-outline {
  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
  --pkt-color-button-border-normal: var(--pkt-color-brand-red-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
}

.pkt-btn--secondary {
  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
  --pkt-color-button-text-disabled: var(--pkt-color-grays-gray-600);
}

[data-mode=dark] .pkt-btn--secondary {
  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
  --pkt-color-button-border-normal: var(--pkt-color-brand-neutrals-white);
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
  --pkt-color-button-background-focus: var(--pkt-color-brand-blue-500);
  --pkt-color-button-border-focus: var(--pkt-color-brand-blue-500);
  --pkt-color-button-background-hover: var(--pkt-color-brand-blue-500);
  --pkt-color-button-border-hover: var(--pkt-color-brand-blue-500);
  --pkt-color-button-background-active: var(--pkt-color-brand-blue-500);
  --pkt-color-button-border-active: var(--pkt-color-brand-blue-500);
  --pkt-color-button-background-disabled: var(--pkt-color-grays-gray-100);
  --pkt-color-button-border-disabled: var(--pkt-color-grays-gray-100);
}
[data-mode=dark] .pkt-btn--secondary--green-dark {
  --pkt-color-button-background-normal: var(--pkt-color-brand-dark-green-1000);
  --pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
}
[data-mode=dark] .pkt-btn--secondary--green-dark-outline {
  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
  --pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
}
[data-mode=dark] .pkt-btn--secondary--green {
  --pkt-color-button-background-normal: var(--pkt-color-brand-green-1000);
  --pkt-color-button-border-normal: var(--pkt-color-brand-green-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
}
[data-mode=dark] .pkt-btn--secondary--green-outline {
  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
  --pkt-color-button-border-normal: var(--pkt-color-brand-green-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
}
[data-mode=dark] .pkt-btn--secondary--blue {
  --pkt-color-button-background-normal: var(--pkt-color-brand-blue-1000);
  --pkt-color-button-border-normal: var(--pkt-color-brand-blue-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
}
[data-mode=dark] .pkt-btn--secondary--blue-outline {
  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
  --pkt-color-button-border-normal: var(--pkt-color-brand-blue-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
}
[data-mode=dark] .pkt-btn--secondary--beige-light {
  --pkt-color-button-background-normal: var(--pkt-color-brand-light-beige-1000);
  --pkt-color-button-border-normal: var(--pkt-color-brand-light-beige-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
}
[data-mode=dark] .pkt-btn--secondary--beige-dark-outline {
  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
  --pkt-color-button-border-normal: var(--pkt-color-brand-dark-beige-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
}
[data-mode=dark] .pkt-btn--secondary--yellow {
  --pkt-color-button-background-normal: var(--pkt-color-brand-yellow-1000);
  --pkt-color-button-border-normal: var(--pkt-color-brand-yellow-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
}
[data-mode=dark] .pkt-btn--secondary--yellow-outline {
  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
  --pkt-color-button-border-normal: var(--pkt-color-brand-yellow-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
}
[data-mode=dark] .pkt-btn--secondary--red {
  --pkt-color-button-background-normal: var(--pkt-color-brand-red-1000);
  --pkt-color-button-border-normal: var(--pkt-color-brand-red-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
}
[data-mode=dark] .pkt-btn--secondary--red-outline {
  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
  --pkt-color-button-border-normal: var(--pkt-color-brand-red-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
}

.pkt-btn--tertiary {
  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
  --pkt-color-button-border-normal: var(--pkt-color-brand-neutrals-transparent);
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
  --pkt-color-button-background-focus: var(--pkt-color-brand-neutrals-200);
  --pkt-color-button-text-focus: var(--pkt-color-brand-warm-blue-1000);
  --pkt-color-button-background-hover: var(--pkt-color-brand-neutrals-200);
  --pkt-color-button-border-hover: var(--pkt-color-brand-neutrals-200);
  --pkt-color-button-text-hover: var(--pkt-color-brand-warm-blue-1000);
  --pkt-color-button-text-disabled: var(--pkt-color-grays-gray-600);
}

[data-mode=dark] .pkt-btn--tertiary {
  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
  --pkt-color-button-border-normal: var(--pkt-color-brand-neutrals-transparent);
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
  --pkt-color-button-background-focus: var(--pkt-color-brand-dark-blue-700);
  --pkt-color-button-border-focus: var(--pkt-color-brand-dark-blue-700);
  --pkt-color-button-text-focus: var(--pkt-color-brand-neutrals-white);
  --pkt-color-button-background-hover: var(--pkt-color-brand-dark-blue-700);
  --pkt-color-button-border-hover: var(--pkt-color-brand-dark-blue-700);
  --pkt-color-button-text-hover: var(--pkt-color-brand-neutrals-white);
  --pkt-color-button-background-active: var(--pkt-color-brand-dark-blue-700);
  --pkt-color-button-border-active: var(--pkt-color-brand-dark-blue-700);
  --pkt-color-button-text-active: var(--pkt-color-brand-neutrals-white);
}
[data-mode=dark] .pkt-btn--tertiary--green-dark {
  --pkt-color-button-background-normal: var(--pkt-color-brand-dark-green-1000);
  --pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
}
[data-mode=dark] .pkt-btn--tertiary--green-dark-outline {
  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
  --pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
}
[data-mode=dark] .pkt-btn--tertiary--green {
  --pkt-color-button-background-normal: var(--pkt-color-brand-green-1000);
  --pkt-color-button-border-normal: var(--pkt-color-brand-green-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
}
[data-mode=dark] .pkt-btn--tertiary--green-outline {
  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
  --pkt-color-button-border-normal: var(--pkt-color-brand-green-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
}
[data-mode=dark] .pkt-btn--tertiary--blue {
  --pkt-color-button-background-normal: var(--pkt-color-brand-blue-1000);
  --pkt-color-button-border-normal: var(--pkt-color-brand-blue-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
}
[data-mode=dark] .pkt-btn--tertiary--blue-outline {
  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
  --pkt-color-button-border-normal: var(--pkt-color-brand-blue-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
}
[data-mode=dark] .pkt-btn--tertiary--beige-light {
  --pkt-color-button-background-normal: var(--pkt-color-brand-light-beige-1000);
  --pkt-color-button-border-normal: var(--pkt-color-brand-light-beige-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
}
[data-mode=dark] .pkt-btn--tertiary--beige-dark-outline {
  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
  --pkt-color-button-border-normal: var(--pkt-color-brand-dark-beige-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
}
[data-mode=dark] .pkt-btn--tertiary--yellow {
  --pkt-color-button-background-normal: var(--pkt-color-brand-yellow-1000);
  --pkt-color-button-border-normal: var(--pkt-color-brand-yellow-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
}
[data-mode=dark] .pkt-btn--tertiary--yellow-outline {
  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
  --pkt-color-button-border-normal: var(--pkt-color-brand-yellow-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
}
[data-mode=dark] .pkt-btn--tertiary--red {
  --pkt-color-button-background-normal: var(--pkt-color-brand-red-1000);
  --pkt-color-button-border-normal: var(--pkt-color-brand-red-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
}
[data-mode=dark] .pkt-btn--tertiary--red-outline {
  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
  --pkt-color-button-border-normal: var(--pkt-color-brand-red-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
}

pkt-button[disabled],
pkt-button[data-disabled],
pkt-button[isLoading] {
  pointer-events: none;
}

.pkt-btn {
  border-radius: 0;
  cursor: pointer;
  display: inline-flex;
  font-family: inherit;
  font-weight: normal;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  vertical-align: top;
  background-color: var(--pkt-color-button-background-normal);
  border: 2px solid var(--pkt-color-button-border-normal);
  color: var(--pkt-color-button-text-normal);
  text-decoration: none;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  text-align: left;
  align-items: center;
  column-gap: 0.5rem;
  -webkit-appearance: none;
  appearance: none;
  width: fit-content;
}
@media screen and (max-width: 36rem) {
  .pkt-btn--full-small, .pkt-btn--full-small .pkt-btn {
    display: flex;
    width: 100%;
    justify-content: center;
  }
}
.pkt-btn {
  height: 3rem;
  padding: 0 1rem;
  line-height: 1.1;
  letter-spacing: -0.2px;
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.pkt-btn__icon, .pkt-btn__icon .pkt-icon {
  height: 1.5rem;
  width: 1.5rem;
}
.pkt-btn--label-only .pkt-btn__icon:not(.pkt-btn__spinner) {
  display: none;
}
.pkt-btn--icon-left {
  flex-direction: row;
}
.pkt-btn--icon-right {
  flex-direction: row-reverse;
}
.pkt-btn--icons-right-and-left {
  flex-direction: row;
}
.pkt-btn--icon-only {
  padding: 0 0.625rem;
}
.pkt-btn--small {
  height: 2.625rem;
  padding: 0 0.5rem;
  line-height: 1.1;
  letter-spacing: -0.2px;
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.375rem;
}
.pkt-btn--small .pkt-btn__icon, .pkt-btn--small .pkt-btn__icon .pkt-icon {
  height: 1.25rem;
  width: 1.25rem;
}
.pkt-btn--small.pkt-btn--icon-only {
  padding: 0 0.5625rem;
}
.pkt-btn--large {
  height: 4rem;
  padding: 0 1rem;
  line-height: 1.1;
  letter-spacing: -0.2px;
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 2.25rem;
}
.pkt-btn--large .pkt-btn__icon, .pkt-btn--large .pkt-btn__icon .pkt-icon {
  height: 2rem;
  width: 2rem;
}
.pkt-btn--large.pkt-btn--icon-only {
  padding: 0 0.875rem;
}
.pkt-btn[class*=pkt-btn--icon] > .pkt-btn__icon {
  display: flex;
}
.pkt-btn__icon {
  --fg-color: currentColor;
  display: none;
  flex-shrink: 0;
}
.pkt-btn:link, .pkt-btn:visited {
  color: var(--pkt-color-button-text-normal);
}
.pkt-btn:focus {
  outline: none;
}
a.pkt-btn:focus-visible,
div.pkt-btn:not([data-disabled]):focus-visible, .pkt-btn:enabled:focus-visible, .pkt-btn.pkt-btn:focus-visible, .pkt-btn.pkt-btn--focus, .pkt-btn--focus .pkt-btn {
  background-color: var(--pkt-color-button-background-focus);
  color: var(--pkt-color-button-text-focus);
  border-color: var(--pkt-color-button-border-focus);
  outline: 4px solid var(--pkt-color-border-states-focus);
  text-decoration: none;
}

a.pkt-btn:hover,
div.pkt-btn:not([data-disabled]):hover, .pkt-btn:enabled:hover, .pkt-btn:hover:not(:disabled):not([disabled]):not([data-disabled]), .pkt-btn.pkt-btn--hover, .pkt-btn--hover .pkt-btn {
  background-color: var(--pkt-color-button-background-hover);
  border-color: var(--pkt-color-button-border-hover);
  color: var(--pkt-color-button-text-hover);
  outline: 0;
  text-decoration: underline;
}

a.pkt-btn:active,
div.pkt-btn:not([data-disabled]):active, .pkt-btn:enabled:active, .pkt-btn:active:not(:disabled):not([disabled]):not([data-disabled]), .pkt-btn.pkt-btn--active:not(:disabled):not([disabled]):not([data-disabled]), .pkt-btn.pkt-btn--active:not(:disabled):not([disabled]):not([data-disabled]):hover, .pkt-btn--active .pkt-btn {
  background-color: var(--pkt-color-button-background-active);
  border-color: var(--pkt-color-button-border-active);
  color: var(--pkt-color-button-text-active);
  text-decoration: none;
  cursor: inherit;
}

.pkt-btn.pkt-btn--isLoading, .pkt-btn--isLoading .pkt-btn {
  pointer-events: none;
  cursor: inherit;
}
.pkt-btn:disabled, .pkt-btn[disabled], .pkt-btn[data-disabled], .pkt-btn:disabled .pkt-btn {
  background-color: var(--pkt-color-button-background-disabled);
  border-color: var(--pkt-color-button-border-disabled);
  color: var(--pkt-color-button-text-disabled);
  cursor: inherit;
  pointer-events: none;
}
.pkt-btn::-moz-focus-inner {
  border: 0;
}
.pkt-btn--green-dark {
  --pkt-color-button-background-normal: var(--pkt-color-brand-dark-green-1000);
  --pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
}
.pkt-btn--green-dark-outline {
  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
  --pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
}
.pkt-btn--green {
  --pkt-color-button-background-normal: var(--pkt-color-brand-green-1000);
  --pkt-color-button-border-normal: var(--pkt-color-brand-green-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
}
.pkt-btn--green-outline {
  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
  --pkt-color-button-border-normal: var(--pkt-color-brand-green-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
}
.pkt-btn--blue {
  --pkt-color-button-background-normal: var(--pkt-color-brand-blue-1000);
  --pkt-color-button-border-normal: var(--pkt-color-brand-blue-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
}
.pkt-btn--blue-outline {
  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
  --pkt-color-button-border-normal: var(--pkt-color-brand-blue-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
}
.pkt-btn--beige-light {
  --pkt-color-button-background-normal: var(--pkt-color-brand-light-beige-1000);
  --pkt-color-button-border-normal: var(--pkt-color-brand-light-beige-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
}
.pkt-btn--beige-dark-outline {
  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
  --pkt-color-button-border-normal: var(--pkt-color-brand-dark-beige-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
}
.pkt-btn--yellow {
  --pkt-color-button-background-normal: var(--pkt-color-brand-yellow-1000);
  --pkt-color-button-border-normal: var(--pkt-color-brand-yellow-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
}
.pkt-btn--yellow-outline {
  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
  --pkt-color-button-border-normal: var(--pkt-color-brand-yellow-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
}
.pkt-btn--red {
  --pkt-color-button-background-normal: var(--pkt-color-brand-red-1000);
  --pkt-color-button-border-normal: var(--pkt-color-brand-red-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
}
.pkt-btn--red-outline {
  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
  --pkt-color-button-border-normal: var(--pkt-color-brand-red-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
}

/* 
 * Form elements
 * https://css-tricks.com/html-inputs-and-labels-a-love-story/
 * 
 */
/* TODO: move to animation.scss */
@keyframes enter {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}
/* TODO: Contemplate and decide if this should be split up to multiple files or not.
 * button is only one without pkt-form prefix. Is that ok???
 */
.pkt-form {
  /* EXPLICIT LABEL (recommended for use)
   * - the label is connected to an input via "for" and "id"
   */
}
.pkt-form-group {
  margin-bottom: 1.5rem;
}
.pkt-form-group:focus-within {
  color: var(--pkt-color-brand-warm-blue-1000);
}
.pkt-form-label {
  width: 100%;
}
.pkt-form-label > p:first-child {
  display: inline;
}
.pkt-form-help {
  margin: 0.25em 0;
  font-size: 0.875rem;
  line-height: 1.25em;
  opacity: 0.9;
}
.pkt-form-validation {
  animation: enter 0.2s ease-in forwards;
  background-color: var(--pkt-color-brand-red-1000);
  border: 2px solid var(--pkt-color-brand-red-1000);
  font-size: 0.875rem;
  line-height: 2rem;
  margin: 1rem 0 0;
  padding: 0.4375rem 0.5rem;
  transform-origin: 0 0;
}
.pkt-form-validation--warning {
  background-color: var(--pkt-color-brand-yellow-1000);
  border-color: var(--pkt-color-brand-yellow-1000);
}
.pkt-form-validation--error {
  background-color: var(--pkt-color-brand-red-1000);
  border-color: var(--pkt-color-brand-red-1000);
}
.pkt-form-input, .pkt-form-textarea {
  appearance: none;
  background-clip: padding-box;
  background-color: var(--pkt-color-brand-neutrals-white);
  border: 2px solid var(--pkt-color-brand-dark-blue-1000);
  border-radius: 0;
  color: var(--pkt-color-brand-dark-blue-1000);
  display: block;
  font-size: 1rem;
  font-weight: 400;
  line-height: 2rem;
  margin: 0;
  padding: 0.4375rem 0.5rem;
  position: relative;
  width: 100%;
  /* Placeholder
   * 1. Override Firefox's default opacity
   */
}
.pkt-form-input:focus, .pkt-form-textarea:focus {
  background-color: var(--pkt-color-brand-neutrals-white);
  border-color: var(--pkt-color-brand-warm-blue-1000);
  box-shadow: 0 0 var(--pkt-color-brand-warm-blue-1000);
  color: var(--pkt-color-brand-warm-blue-1000);
  outline: 2px solid var(--pkt-color-brand-warm-blue-1000);
}
.pkt-form-input::placeholder, .pkt-form-textarea::placeholder {
  color: var(--pkt-color-grays-gray-300);
  opacity: 1;
  /* 1 */
}
.pkt-form-input + .pkt-form-validation, .pkt-form-textarea + .pkt-form-validation {
  display: none;
}
.pkt-form-input:not(:placeholder-shown):invalid, .pkt-form-textarea:not(:placeholder-shown):invalid {
  border-color: var(--pkt-color-brand-red-1000);
}
.pkt-form-input:not(:placeholder-shown):invalid + .pkt-form-validation, .pkt-form-textarea:not(:placeholder-shown):invalid + .pkt-form-validation {
  display: inherit;
}
.pkt-form-input:disabled, .pkt-form-input[readonly], .pkt-form-textarea:disabled, .pkt-form-textarea[readonly] {
  background-color: var(--pkt-color-brand-neutrals-200);
  border-color: var(--pkt-color-grays-gray-300);
  color: var(--pkt-color-grays-gray-300);
  cursor: inherit;
}
/*
 * Checkbox and radio
 *
 *
 */
.pkt-input-check, .pkt-input-check__input, .pkt-input-check__input-checkbox, .pkt-input-check__input--tile {
  --pkt-color-input-background-normal: var(--pkt-color-brand-neutrals-white);
  --pkt-color-input-border-active: var(--pkt-color-brand-warm-blue-1000);
  --pkt-color-input-border-disabled: var(--pkt-color-grays-gray-300);
  --pkt-color-input-border-error: var(--pkt-color-brand-red-1000);
  --pkt-color-input-border-hover: var(--pkt-color-brand-warm-blue-1000);
  --pkt-color-input-border-normal: var(--pkt-color-brand-dark-blue-1000);
  --pkt-color-input-check-border: var(--pkt-color-input-border-normal);
  --pkt-color-input-text-active: var(--pkt-color-brand-warm-blue-1000);
  --pkt-color-input-text-disabled: var(--pkt-color-grays-gray-500);
  --pkt-color-input-text-hover: var(--pkt-color-brand-warm-blue-1000);
  --pkt-color-input-text-error: var(--pkt-color-brand-red-1000);
}
[data-mode=dark] .pkt-input-check, [data-mode=dark] .pkt-input-check__input, [data-mode=dark] .pkt-input-check__input-checkbox, [data-mode=dark] .pkt-input-check__input--tile {
  --pkt-color-input-background-normal: var(--pkt-color-brand-dark-blue-1000);
  --pkt-color-input-border-active: var(--pkt-color-brand-blue-500);
  --pkt-color-input-border-disabled: var(--pkt-color-grays-gray-200);
  --pkt-color-input-border-error: var(--pkt-color-brand-red-1000);
  --pkt-color-input-border-hover: var(--pkt-color-brand-blue-500);
  --pkt-color-input-border-normal: var(--pkt-color-brand-neutrals-white);
  --pkt-color-input-check-border: var(--pkt-color-input-border-normal);
  --pkt-color-input-text-active: var(--pkt-color-brand-blue-500);
  --pkt-color-input-text-disabled: var(--pkt-color-grays-gray-200);
  --pkt-color-input-text-hover: var(--pkt-color-brand-blue-500);
  --pkt-color-input-text-error: var(--pkt-color-brand-red-1000);
}

.pkt-input-check {
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
}
.pkt-input-check__input {
  display: flex;
}
.pkt-input-check__input-label {
  color: var(--pkt-color-text-body-default);
  padding-left: 0.5rem;
  letter-spacing: -0.2px;
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.5rem;
}
.pkt-input-check__input-label--left {
  padding-left: 0;
  padding-right: 0.5rem;
}
.pkt-input-check__input-helptext {
  padding-top: 0.5rem;
  max-width: 21.875rem;
  color: var(--pkt-color-text-body-default);
  letter-spacing: -0.2px;
  font-weight: 300;
  font-size: 0.875rem;
  line-height: 1.375rem;
}
.pkt-input-check__input:hover > .pkt-input-check__input-checkbox:not(:disabled) + .pkt-input-check__input-label {
  color: var(--pkt-color-input-text-hover);
}
.pkt-input-check__input-checkbox {
  appearance: none;
  background-color: var(--pkt-color-input-background-normal);
  border: 2px solid var(--pkt-color-input-check-border);
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  transition: all 0.3s ease-out;
}
.pkt-input-check__input-checkbox[type=checkbox] {
  border-radius: 0;
}
.pkt-input-check__input-checkbox[type=checkbox][role=switch] {
  position: relative;
  height: calc(1.5rem + 2px);
  width: 2.5rem;
  border-radius: calc(0.75rem + 2px);
}
.pkt-input-check__input-checkbox[type=checkbox][role=switch]:after {
  display: block;
  content: "";
  border: 2px solid var(--pkt-color-input-check-border);
  background-color: var(--pkt-color-input-background-normal);
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: -1px;
  width: 1.5rem;
  border-radius: 0.75rem;
  transition: all 0.3s ease-out;
}
.pkt-input-check__input-checkbox[type=radio] {
  border-radius: 50%;
  border: none;
  width: 1.25rem;
  height: 1.25rem;
  box-shadow: 0px 0px 0px 0.125rem var(--pkt-color-input-border-normal);
}
.pkt-input-check__input-checkbox:focus-visible:not(:disabled) + .pkt-input-check__input-label {
  color: var(--pkt-color-input-text-hover);
}
.pkt-input-check__input-checkbox[type=checkbox]:hover {
  --pkt-color-input-check-border: var(--pkt-color-input-border-hover);
}
.pkt-input-check__input-checkbox[type=checkbox]:active:not(:disabled) {
  --pkt-color-input-check-border: var(--pkt-color-input-border-active);
  outline: 6px solid var(--pkt-color-input-border-active);
}
.pkt-input-check__input-checkbox[type=checkbox]:focus-visible {
  --pkt-color-input-check-border: var(--pkt-color-input-border-active);
  outline: 4px solid var(--pkt-color-border-states-focus);
  outline-offset: 0;
}
.pkt-input-check__input-checkbox[type=radio]:hover {
  box-shadow: 0px 0px 0px 0.125rem var(--pkt-color-input-border-hover);
  outline-color: var(--pkt-color-input-border-hover);
}
.pkt-input-check__input-checkbox:checked[type=checkbox] {
  --svg: url(https://punkt-cdn.oslo.kommune.no/13.0/icons/check-medium.svg);
  position: relative;
  background-color: var(--pkt-color-input-border-normal);
}
.pkt-input-check__input-checkbox:checked:not([role=switch])[type=checkbox]:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.pkt-input-check__input-checkbox:checked:not([role=switch])[type=checkbox]:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  background-image: var(--svg);
  background-repeat: no-repeat;
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(271deg) brightness(105%) contrast(101%);
}
.pkt-input-check__input-checkbox:checked[role=switch]:after {
  left: calc(100% + 1px);
  transform: translate(-100%, 0);
  background-image: var(--svg);
  background-repeat: no-repeat;
}
.pkt-input-check__input-checkbox:checked[type=radio] {
  background-color: var(--pkt-color-input-border-normal);
  border: 3px solid var(--pkt-color-input-background-normal);
  box-shadow: 0px 0px 0px 0.125rem var(--pkt-color-input-border-normal);
}
.pkt-input-check__input-checkbox:checked[type=checkbox]:focus-visible {
  background-color: var(--pkt-color-input-border-active);
}
.pkt-input-check__input-checkbox:checked[type=checkbox]:hover {
  background-color: var(--pkt-color-input-border-hover);
}
.pkt-input-check__input-checkbox:checked[type=radio]:focus-visible {
  background-color: var(--pkt-color-input-border-active);
  border: 3px solid var(--pkt-color-input-background-normal);
  outline: none;
  box-shadow: 0px 0px 0px 0.125rem var(--pkt-color-input-border-active), 0px 0px 0px 0.375rem var(--pkt-color-border-states-focus);
}
.pkt-input-check__input-checkbox:checked[type=radio]:hover {
  box-shadow: 0px 0px 0px 0.125rem var(--pkt-color-input-border-hover);
  background-color: var(--pkt-color-input-border-hover);
}
.pkt-input-check__input-checkbox:disabled[type=checkbox] {
  background-color: var(--pkt-color-surface-default-gray);
  --pkt-color-input-check-border: var(--pkt-color-input-border-disabled);
  cursor: not-allowed;
}
.pkt-input-check__input-checkbox:disabled[type=checkbox][role=switch]:checked:after {
  --svg: url(https://punkt-cdn.oslo.kommune.no/13.0/icons/check-medium.svg);
  --pkt-color-input-check-border: var(--pkt-color-input-border-normal);
  filter: grayscale(100%) brightness(400%);
}
.pkt-input-check__input-checkbox:disabled[type=radio] {
  box-shadow: 0px 0px 0px 0.125rem var(--pkt-color-input-border-disabled);
  background-color: var(--pkt-color-surface-default-gray);
  cursor: not-allowed;
  outline-color: var(--pkt-color-input-border-disabled);
}
.pkt-input-check__input-checkbox:disabled:checked[type=checkbox] {
  background-color: var(--pkt-color-input-border-disabled);
  --pkt-color-input-check-border: var(--pkt-color-input-border-disabled);
}
.pkt-input-check__input-checkbox:disabled:checked[type=radio] {
  box-shadow: 0px 0px 0px 0.125rem var(--pkt-color-input-border-disabled);
  background-color: var(--pkt-color-input-border-disabled);
}
.pkt-input-check__input-label--disabled, .pkt-input-check__input-label--disabled .pkt-input-check__input-helptext, .pkt-input-check__input-checkbox:disabled + .pkt-inputwrapper, .pkt-input-check__input-checkbox:disabled + .pkt-inputwrapper .pkt-input-check__input-helptext, .pkt-input-check__input-checkbox:disabled + .pkt-input-check__input-label, .pkt-input-check__input-checkbox:disabled + .pkt-input-check__input-label .pkt-input-check__input-helptext {
  color: var(--pkt-color-input-text-disabled);
  cursor: not-allowed;
}

.pkt-input-check__input-checkbox--error[type=checkbox]:not([role=switch]):checked:after {
  filter: brightness(0) saturate(100%) invert(15%) sepia(11%) saturate(5273%) hue-rotate(212deg) brightness(96%) contrast(94%);
}
.pkt-input-check__input-checkbox--error[type=checkbox], .pkt-input-check__input-checkbox--error[type=checkbox]:hover, .pkt-input-check__input-checkbox--error[type=checkbox]:focus-visible, .pkt-input-check__input-checkbox--error[type=checkbox]:checked, .pkt-input-check__input-checkbox--error[type=checkbox]:checked:focus-visible, .pkt-input-check__input-checkbox--error[type=checkbox]:checked:hover, .pkt-input-check__input-checkbox--error[type=checkbox]:active:not(:disabled), .pkt-input-check__input-checkbox--error:checked[type=checkbox]:checked:before {
  background-color: var(--pkt-color-surface-default-faded-red);
  --pkt-color-input-check-border: var(--pkt-color-input-border-error);
  outline-color: var(--pkt-color-input-border-error);
}
.pkt-input-check__input-checkbox--error[type=radio], .pkt-input-check__input-checkbox--error[type=radio]:hover, .pkt-input-check__input-checkbox--error[type=radio]:focus-visible, .pkt-input-check__input-checkbox--error[type=radio]:hover, .pkt-input-check__input-checkbox--error[type=radio]:active:not(:disabled) {
  box-shadow: 0px 0px 0px 0.125rem var(--pkt-color-input-border-error);
  background-color: var(--pkt-color-surface-default-faded-red);
}
.pkt-input-check__input-checkbox--error[type=radio]:checked, .pkt-input-check__input-checkbox--error[type=radio]:checked:focus-visible, .pkt-input-check__input-checkbox--error[type=radio]:checked:hover, .pkt-input-check__input-checkbox--error[type=radio]:checked:focus-visible + .pkt-input-check__input--tile {
  box-shadow: 0px 0px 0px 0.125rem var(--pkt-color-input-border-error);
  background-color: var(--pkt-color-input-border-active);
}
.pkt-input-check__input-checkbox--error[type=radio]:checked:hover, .pkt-input-check__input-checkbox--error[type=radio]:checked:focus-visible {
  background-color: var(--pkt-color-input-border-active);
}
.pkt-input-check__input--tile {
  border: 2px solid var(--pkt-color-border-subtle);
  width: 21.875rem;
  position: relative;
  /* TODO - Wait on firefox-support!
  &:has(:checked) {
    border-color: var(--choice-checked-rb-bc);
  }*/
}
.pkt-input-check__input--tile .pkt-input-check__input-label:before {
  content: "";
}
.pkt-input-check__input--tile > .pkt-input-check__input-label {
  padding: 1rem 1rem 1rem 0.5rem;
  width: 100%;
}
.pkt-input-check__input--tile > .pkt-input-check__input-checkbox {
  margin: 1rem 0 1rem 1rem;
}
.pkt-input-check__input--tile .pkt-input-check__input-checkbox:checked:not(:disabled) + .pkt-input-check__input-label:before {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: -2px;
  top: -2px;
  border: 2px solid var(--pkt-color-border-default);
  pointer-events: none;
}
.pkt-input-check__input--tile:focus-within {
  background-color: var(--pkt-color-input-background-normal);
  border-color: var(--pkt-color-border-states-active);
  outline: 4px solid var(--pkt-color-border-states-focus);
}
.pkt-input-check__input--tile:hover:not(.pkt-input-check__input--tile-disabled) {
  border-color: var(--pkt-color-border-states-hover);
}
.pkt-input-check__input--tile:hover > .pkt-input-check__input-checkbox:checked + .pkt-input-check__input-label:before {
  border-color: var(--pkt-color-border-states-hover);
}
.pkt-input-check__input--tile:active:not(:disabled) > .pkt-input-check__input-checkbox:checked + .pkt-input-check__input-label:before {
  border-color: var(--pkt-color-border-states-active);
}
.pkt-input-check__input--tile:disabled {
  border-color: var(--pkt-color-border-states-disabled);
}
.pkt-input-check__input--tile .pkt-input-check__input-checkbox:not(.pkt-input-check__input-checkbox--error):checked[type=radio]:focus-visible {
  box-shadow: 0px 0px 0px 0.125rem var(--pkt-color-border-states-active);
}
.pkt-input-check__input--tile .pkt-input-check__input-checkbox[type=checkbox]:focus-visible {
  outline: none;
}

[data-mode=dark] .pkt-input-check__input-checkbox[type=checkbox]:not([role=switch]):after {
  filter: brightness(0) saturate(100%) invert(15%) sepia(11%) saturate(5273%) hue-rotate(212deg) brightness(96%) contrast(94%);
}
[data-mode=dark] .pkt-input-check__input-checkbox[type=checkbox][role=switch]:checked:not(:disabled) {
  background-color: var(--pkt-color-input-border-hover);
  border-color: var(--pkt-color-input-border-hover);
}
[data-mode=dark] .pkt-input-check__input-checkbox[type=checkbox][role=switch]:checked:after {
  background-color: var(--pkt-color-brand-neutrals-white);
}
[data-mode=dark] .pkt-input-check__input-checkbox[type=checkbox][role=switch]:disabled:not(:checked) {
  background-color: transparent;
}
[data-mode=dark] .pkt-input-check__input-checkbox--error[type=checkbox][role=switch]:is(input), [data-mode=dark] .pkt-input-check__input-checkbox--error[type=checkbox][role=switch]:is(input):checked:checked {
  background-color: var(--pkt-color-surface-default-faded-red);
  border-color: var(--pkt-color-input-border-error);
}

/*
 * Horisontal divider <hr>
 */
.pkt-hr {
  border: 0;
  width: 100%;
  border-top: 1px solid var(--pkt-color-grays-gray-200);
}

/* 
 * Image elements
 */
/*
DEBATE:
CSS reset in minside-frontend sets all images to be fluid by default. However, this breaks
a lot of third-party widgets like Google Maps, as they are not expecting the images within themselves
to be resized from the outside.

Therefore, this is removed from the reset here, and images who need to be fluid need a class for it.
*/
.img-fluid {
  max-width: 100%;
  height: auto;
}

.img-round {
  border-radius: 50%;
  overflow: hidden;
  object-fit: cover;
}

.figure {
  display: inline-block;
}

/* Common styles for all inputs */
pkt-textinput,
pkt-textarea,
pkt-select {
  display: block;
}

.pkt-input, .pkt-select select,
.pkt-select:is(select),
.pkt-input-prefix,
.pkt-input-suffix,
.pkt-input-icon,
.pkt-input__container {
  --pkt-color-input-background-normal: var(--pkt-color-brand-neutrals-white);
  --pkt-color-input-border-active: var(--pkt-color-brand-warm-blue-1000);
  --pkt-color-input-border-disabled: var(--pkt-color-grays-gray-300);
  --pkt-color-input-border-error: var(--pkt-color-brand-red-1000);
  --pkt-color-input-border-hover: var(--pkt-color-brand-warm-blue-1000);
  --pkt-color-input-border-normal: var(--pkt-color-brand-dark-blue-1000);
  --pkt-color-input-text-active: var(--pkt-color-brand-warm-blue-1000);
  --pkt-color-input-text-disabled: var(--pkt-color-grays-gray-500);
  --pkt-color-input-text-hover: var(--pkt-color-brand-warm-blue-1000);
  --pkt-color-input-text-normal: var(--pkt-color-brand-dark-blue-1000);
  --pkt-color-input-text-error: var(--pkt-color-brand-red-1000);
  --pkt-color-input-text-open: var(--pkt-color-brand-neutrals-white);
}

[data-mode=dark] .pkt-input, [data-mode=dark] .pkt-select select, .pkt-select [data-mode=dark] select,
[data-mode=dark] .pkt-select:is(select),
[data-mode=dark] .pkt-input-prefix,
[data-mode=dark] .pkt-input-suffix,
[data-mode=dark] .pkt-input-icon,
[data-mode=dark] .pkt-input__container {
  --pkt-color-input-background-normal: var(--pkt-color-brand-neutrals-white);
  --pkt-color-input-border-active: var(--pkt-color-brand-blue-500);
  --pkt-color-input-border-disabled: var(--pkt-color-grays-gray-200);
  --pkt-color-input-border-error: var(--pkt-color-brand-red-1000);
  --pkt-color-input-border-hover: var(--pkt-color-brand-blue-500);
  --pkt-color-input-border-normal: var(--pkt-color-brand-neutrals-white);
  --pkt-color-input-text-active: var(--pkt-color-brand-warm-blue-1000);
  --pkt-color-input-text-disabled: var(--pkt-color-grays-gray-200);
  --pkt-color-input-text-hover: var(--pkt-color-brand-warm-blue-1000);
  --pkt-color-input-text-normal: var(--pkt-color-brand-dark-blue-1000);
  --pkt-color-input-text-error: var(--pkt-color-brand-red-1000);
  --pkt-color-input-text-open: var(--pkt-color-brand-dark-blue-1000);
}

.pkt-input, .pkt-select select,
.pkt-select:is(select) {
  display: flex;
  align-items: center;
  appearance: none;
  background-color: var(--pkt-color-input-background-normal);
  border: 2px solid var(--pkt-color-input-border-normal);
  border-radius: 0;
  color: var(--pkt-color-input-text-normal);
  margin: 0;
  padding: 0.5rem 1rem;
  letter-spacing: -0.2px;
  font-weight: 300;
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.pkt-input:not(.pkt-input-compact), .pkt-select select:not(.pkt-input-compact),
.pkt-select:not(.pkt-input-compact):is(select) {
  min-height: 3rem;
}
.pkt-input-compact.pkt-input, .pkt-select select.pkt-input-compact,
.pkt-input-compact.pkt-select:is(select) {
  border: 0;
  border-bottom: 1px solid var(--pkt-color-input-border-normal);
  padding: 0 0 0.1rem 0;
  letter-spacing: -0.2px;
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.5rem;
}
.pkt-input-compact.pkt-input:is(select):not([multiple]), .pkt-select select.pkt-input-compact:is(select):not([multiple]),
.pkt-input-compact.pkt-select:is(select):not([multiple]) {
  background-position: right 0 top 50%;
  padding-right: 2rem;
}
.pkt-input:not(textarea[cols]):not(input[size]):not(.pkt-input--fullwidth):not(.pkt-datepicker__input:not(.pkt-datepicker--multiple)), .pkt-select select:not(textarea[cols]):not(input[size]):not(.pkt-input--fullwidth):not(.pkt-datepicker__input:not(.pkt-datepicker--multiple)),
.pkt-select:not(textarea[cols]):not(input[size]):not(.pkt-input--fullwidth):not(.pkt-datepicker__input:not(.pkt-datepicker--multiple)):is(select), .pkt-input__container:not(:is(:has(.pkt-datepicker__input:not(.pkt-datepicker--multiple)))):not(:is(:has(textarea[cols]))):not(:is(:has(input[size]))):not(:is(:has(.pkt-input--fullwidth))) {
  width: min(31rem, 100%);
}
.pkt-input__container:is(:has(.pkt-datepicker__input:not(.pkt-datepicker--multiple))):not(:is(:has(.pkt-input--fullwidth))) {
  width: fit-content;
}
.pkt-input--fullwidth, .pkt-input--fullwidth + .pkt-input__counter {
  width: 100%;
}
.pkt-input:is(textarea), .pkt-select select:is(textarea),
.pkt-select:is(textarea):is(select) {
  min-height: 8rem;
}
.pkt-input:is(select), .pkt-select select:is(select),
.pkt-select:is(select) {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  padding-right: 3rem;
}
.pkt-input:is(select):not([multiple]), .pkt-select select:is(select):not([multiple]),
.pkt-select:is(select):not([multiple]) {
  --svg: url(https://punkt-cdn.oslo.kommune.no/13.0/icons/chevron-thin-down.svg);
  background-image: var(--svg);
  background-repeat: no-repeat;
  background-position: right 0.7rem top 50%;
  background-size: 1.5rem auto, 100%;
}
.pkt-input:is(select) option, .pkt-select select:is(select) option,
.pkt-select:is(select) option {
  background-color: var(--pkt-color-input-background-normal);
  color: var(--pkt-color-input-text-normal);
  font-weight: normal;
}
.pkt-input::placeholder, .pkt-select select::placeholder,
.pkt-select:is(select)::placeholder {
  color: var(--pkt-color-text-placeholder);
  opacity: 1;
}
.pkt-input:hover, .pkt-select select:hover,
.pkt-select:hover:is(select), .pkt-input.pkt-input--hover, .pkt-select select.pkt-input--hover,
.pkt-input--hover.pkt-select:is(select) {
  border-color: var(--pkt-color-input-border-hover);
}
.pkt-input:focus-visible, .pkt-select select:focus-visible,
.pkt-select:focus-visible:is(select), .pkt-input.pkt-input__textinput--focus, .pkt-select select.pkt-input__textinput--focus,
.pkt-input__textinput--focus.pkt-select:is(select) {
  box-shadow: 0 0 0 2px var(--pkt-color-input-border-active);
  border-color: var(--pkt-color-input-border-active);
}
.pkt-input:focus, .pkt-select select:focus,
.pkt-select:focus:is(select) {
  outline: none;
  box-shadow: 0 0 0 2px var(--pkt-color-input-border-active);
  border-color: var(--pkt-color-input-border-active);
}
.pkt-input:disabled, .pkt-select select:disabled,
.pkt-select:disabled:is(select), .pkt-input:disabled::placeholder, .pkt-select select:disabled::placeholder,
.pkt-select:disabled:is(select)::placeholder, .pkt-input[readonly], .pkt-select select[readonly],
[readonly].pkt-select:is(select) {
  opacity: 1;
  background-color: var(--pkt-color-surface-default-gray);
  border-color: var(--pkt-color-input-border-disabled);
  cursor: inherit;
}
.pkt-input:disabled:active, .pkt-select select:disabled:active,
.pkt-select:disabled:active:is(select) {
  border: 2px solid var(--pkt-color-input-border-disabled);
}
.pkt-input-prefix, .pkt-input-suffix, .pkt-input-icon, .pkt-input-separator {
  letter-spacing: -0.2px;
  font-weight: 300;
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.pkt-input-prefix, .pkt-input-suffix, .pkt-input-icon, .pkt-input-separator {
  display: flex;
  align-items: center;
  width: auto;
  height: 3rem;
  border: 2px solid var(--pkt-color-input-border-normal);
  flex-shrink: 0;
  color: var(--pkt-color-brand-dark-blue-1000);
  background-color: var(--pkt-color-input-background-normal);
}
.pkt-input-prefix {
  padding: 0.5rem 0rem 0.5rem 1rem;
}
.pkt-input-prefix::after {
  content: "";
  width: 1px;
  margin-left: 0.5rem;
  height: 100%;
  background-color: var(--pkt-color-brand-dark-blue-1000);
}
.pkt-input-suffix {
  padding: 0.5rem 1rem 0.5rem 0rem;
}
.pkt-input-suffix svg {
  width: 1.5rem;
  height: 1.5rem;
  margin-left: 0.5rem;
}
.pkt-input-suffix::before {
  content: "";
  width: 1px;
  margin-right: 0.5rem;
  height: 1.5rem;
  background-color: var(--pkt-color-brand-dark-blue-1000);
}
.pkt-input-icon {
  padding: 0.5rem 1rem;
  align-self: stretch;
}
.pkt-input-icon svg {
  width: 1.5rem;
  height: 1.5rem;
}
.pkt-input-icon:not(button) svg {
  margin-left: 0.5rem;
}
.pkt-input-separator {
  padding: 0.5rem 0;
}
.pkt-input--counter-error, .pkt-input--counter-error:focus {
  border-color: var(--pkt-color-input-border-error);
  background-color: var(--pkt-color-surface-default-faded-red);
}
.pkt-input--counter-error:focus {
  box-shadow: 0 0 0 2px var(--pkt-color-input-border-error);
}
.pkt-input__container {
  display: flex;
  align-items: center;
  align-self: stretch;
}
.pkt-input__container:is(:has(input[size])), .pkt-input__container:is(:has(textarea[cols])) {
  align-self: flex-start;
}
.pkt-input__container :first-child:not(:only-child) {
  border-right-width: 0;
}
.pkt-input__container :last-child:not(:only-child) {
  border-left-width: 0;
}
.pkt-input__container :not(:first-child):not(:last-child) {
  border-left-width: 0;
  border-right-width: 0;
}
.pkt-input__container p {
  margin: 0;
}
.pkt-input__container input:focus {
  outline: none;
  box-shadow: none;
}
.pkt-input__container:hover .pkt-input, .pkt-input__container:hover .pkt-select select, .pkt-select .pkt-input__container:hover select,
.pkt-input__container:hover .pkt-select:is(select), .pkt-input__container:hover .pkt-input-prefix, .pkt-input__container:hover .pkt-input-suffix, .pkt-input__container:hover .pkt-input-icon {
  border-color: var(--pkt-color-input-border-active);
}
.pkt-input__container:hover .pkt-input:disabled, .pkt-input__container:hover .pkt-select select:disabled, .pkt-select .pkt-input__container:hover select:disabled,
.pkt-input__container:hover .pkt-select:disabled:is(select), .pkt-input__container:hover .pkt-