@charset "UTF-8";
/**
 * Do not edit directly, this file was auto-generated.
 */
@layer jokul.components {
  .jkl-select {
    --jkl-select-arrow-right: var(--jkl-unit-05);
    --border-width: 0.0625rem;
    --border-radius: var(--jkl-border-radius-s);
    --min-option-height: min(var(--jkl-unit-60), 3rem);
    /* Vi må trekke fra bredden til rammen for å få riktig høyde */
    --button-padding: calc(var(--jkl-unit-15) - var(--border-width))
        calc(0.75em - var(--border-width));
    --option-padding: var(--jkl-unit-05) 0.75em;
    display: block;
    position: relative;
  }
  .jkl-select {
    outline: 0;
    border-style: none;
    outline-style: none;
  }
  .jkl-select:active, .jkl-select:hover, .jkl-select:focus {
    outline: 0;
    outline-style: none;
  }
  @media screen and (forced-colors: active) {
    .jkl-select {
      outline: revert;
      border-style: revert;
      outline-style: revert;
    }
    .jkl-select:active, .jkl-select:hover, .jkl-select:focus {
      outline: revert;
      outline-style: revert;
    }
  }
  .jkl-select *:focus-visible {
    outline: none;
  }
  .jkl-select .jkl-tooltip-question-button:focus {
    outline: 3px solid var(--jkl-color-border-action);
    outline-offset: 0;
  }
  .jkl-select select {
    appearance: none;
  }
  .jkl-select select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 var(--jkl-color-text-subdued);
  }
  .jkl-select select option {
    font-weight: normal;
    font-family: sans-serif;
    color: var(--jkl-color-text-subdued);
    background-color: var(--jkl-color-background-container-high);
  }
  .jkl-select__outer-wrapper {
    position: relative;
    width: 15rem;
    min-width: 7rem;
    max-width: 100%;
  }
  .jkl-select__search-input {
    box-sizing: border-box;
    color: var(--jkl-color-text-subdued);
  }
  .jkl-select__search-input, .jkl-select__button {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background-color: transparent;
    color: var(--jkl-color-text-subdued);
    cursor: pointer;
    height: var(--jkl-select-input-height);
    border-radius: var(--border-radius);
    border: var(--border-width) solid var(--jkl-color-border-input);
    box-shadow: 0 0 0 0.0625rem transparent;
    text-align: left;
    width: 100%;
    padding: var(--button-padding);
    /* Øk padding for å gi plass til ikonet */
    padding-inline-end: 2.05em;
    transition-property: color, border-color, box-shadow;
    transition-timing-function: ease;
    transition-duration: 150ms;
    font-size: var(--jkl-font-size-3);
    line-height: var(--jkl-line-height-tight);
    font-weight: 400;
    --jkl-icon-weight: 300;
  }
  .jkl-select__search-input--active-value, .jkl-select__button--active-value {
    color: var(--jkl-color-text-default);
  }
  .jkl-select__search-input:hover, .jkl-select__button:hover {
    border-color: var(--jkl-color-border-input-focus);
    box-shadow: 0 0 0 0.0625rem var(--jkl-color-border-input-focus);
  }
  .jkl-select__search-input:hover ~ .jkl-select__arrow, .jkl-select__button:hover ~ .jkl-select__arrow {
    transform: translateY(calc(-50% + 0.1875rem));
  }
  .jkl-select__search-input:focus-visible, .jkl-select__button:focus-visible {
    outline: none;
  }
  html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select__search-input:focus-visible, html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select__search-input:has(:focus-visible), html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select__button:focus-visible, html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select__button:has(:focus-visible) {
    outline: 3px solid var(--jkl-color-border-action);
    outline-offset: 3px;
  }
  html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select:has(:focus-visible) .jkl-select__button,
  html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select:has(:focus-visible) .jkl-select__search-input {
    outline: 3px solid var(--jkl-color-border-action);
    outline-offset: 3px;
  }
  .jkl-select__arrow {
    pointer-events: none;
    position: absolute;
    right: 0.75em;
    top: 50%;
    color: var(--jkl-color-text-default);
    transform: translateY(-50%);
    transition-property: transform, color;
    transition-timing-function: ease;
    transition-duration: 150ms;
  }
  @media screen and (forced-colors: active) {
    .jkl-select__arrow {
      stroke: CanvasText;
      fill: CanvasText;
    }
    .jkl-select__arrow svg, .jkl-select__arrow path {
      stroke: CanvasText;
      fill: CanvasText;
    }
  }
  .jkl-select:has([aria-invalid=true]) .jkl-select__arrow {
    color: var(--jkl-color-text-on-alert);
  }
  .jkl-select__options-menu {
    position: absolute;
    left: -0.0625rem;
    right: -0.0625rem;
    top: 100%;
    z-index: 7000;
    background-color: var(--jkl-color-background-container-high);
    border: 0.125rem solid var(--jkl-color-border-input-focus);
    border-top: none;
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    box-sizing: border-box;
    overflow-y: auto;
    max-height: calc((var(--jkl-select-max-shown-options, 5) + 0.5) * var(--min-option-height));
    transition-property: height;
    transition-timing-function: ease;
    transition-duration: 150ms;
  }
  .jkl-select__option-wrapper {
    margin: 0;
    padding: 0;
    list-style-type: none;
    -webkit-overflow-scrolling: touch;
  }
  .jkl-select__option {
    color: unset;
    border: 0;
    width: 100%;
    background-color: inherit;
    min-height: var(--min-option-height);
    text-align: left;
    transition-property: color, background-color;
    position: relative;
    padding: var(--option-padding);
    cursor: pointer;
    transition-timing-function: ease;
    transition-duration: 150ms;
    font-size: var(--jkl-font-size-3);
    line-height: var(--jkl-line-height-tight);
    font-weight: 400;
    --jkl-icon-weight: 300;
    /* For å unngå "dobbel" markering skrur vi av markering på hover i React-
    komponenten med data-focus="controlled". Uten dette satt vil valgene
    markeres ved hover som normalt. */
  }
  .jkl-select__option:focus, :not([data-focus=controlled]) > .jkl-select__option:hover {
    color: var(--jkl-color-text-default);
    background-color: var(--jkl-color-background-interactive-hover);
  }
  .jkl-select__option-description {
    color: var(--jkl-color-text-subdued);
    display: block;
    width: 100%;
    font-size: var(--jkl-font-size-2);
    line-height: var(--jkl-line-height-tight);
    font-weight: 400;
    --jkl-icon-weight: 300;
  }
  .jkl-select {
    /* --------
    VARIANTS
    -------- */
  }
  .jkl-select--inline {
    display: inline-block;
    vertical-align: top;
  }
  .jkl-select--open .jkl-select__search-input,
  .jkl-select--open .jkl-select__button {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-color: var(--jkl-color-border-input-focus);
    background-color: var(--jkl-color-background-container-high);
    box-shadow: 0 0 0 0.0625rem var(--jkl-color-border-input-focus);
  }
  .jkl-select--open .jkl-select__search-input:hover ~ .jkl-select__arrow,
  .jkl-select--open .jkl-select__button:hover ~ .jkl-select__arrow {
    transform: translateY(calc(-50% + -0.1875rem));
  }
  .jkl-select--invalid .jkl-select__search-input,
  .jkl-select--invalid .jkl-select__button {
    background-color: var(--jkl-color-background-alert-error);
    color: var(--jkl-color-text-on-alert-subdued);
  }
  .jkl-select--invalid .jkl-select__search-input--active-value,
  .jkl-select--invalid .jkl-select__button--active-value {
    color: revert;
  }
  @media screen and (forced-colors: active) {
    .jkl-select .jkl-select__button, .jkl-select .jkl-select__search-input {
      color: CanvasText;
      border: 2px solid ButtonText;
      background-color: Canvas;
      outline: revert;
    }
    .jkl-select .jkl-select__button:hover, .jkl-select .jkl-select__search-input:hover {
      border-color: Highlight;
    }
    .jkl-select .jkl-select__option {
      color: CanvasText;
      border-top: 1px solid Canvas;
      border-bottom: 1px solid Canvas;
    }
    .jkl-select .jkl-select__option:hover, .jkl-select .jkl-select__option:focus {
      border-top: 1px solid SelectedItem;
      border-bottom: 1px solid SelectedItem;
      --jkl-icon-weight: 400;
      font-weight: 700;
      letter-spacing: -0.014em;
    }
  }
}