/**
 * Do not edit directly, this file was auto-generated.
 */
@layer jokul.components {
  /* Base layout */
  .jkl-modal-container,
  .jkl-modal-overlay {
    position: fixed;
    inset: 0;
  }
  .jkl-modal-container {
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .jkl-modal-container[aria-hidden=true] {
    visibility: hidden;
    pointer-events: none;
  }
}
@layer jokul.components {
  .jkl-modal-overlay {
    background-color: rgba(27, 25, 23, 0.8);
    opacity: 0;
    transition-timing-function: ease-out;
    transition-duration: 250ms;
    transition-property: opacity;
  }
  .jkl-modal-container:not([aria-hidden=true]) .jkl-modal-overlay {
    opacity: 1;
  }
  @media (prefers-reduced-motion: reduce) {
    .jkl-modal-overlay {
      transition-duration: 0ms;
    }
  }
}
@layer jokul.components {
  .jkl-modal {
    --margin: var(--jkl-spacing-m);
    container-type: inline-size;
    box-sizing: border-box;
    margin: var(--margin);
    padding: var(--modal-padding, var(--jkl-unit-40));
    z-index: 9000;
    background-color: var(--jkl-color-background-container-high);
    border-radius: var(--jkl-border-radius-l);
    box-shadow: 0 0.25rem 0.75rem rgba(37, 42, 49, 0.03);
    width: min(100vw - 2 * var(--margin), var(--modal-width, 60ch));
    max-width: none;
    max-height: 90vh;
    overflow: auto;
    display: flex;
    flex-direction: column;
  }
  @media screen and (forced-colors: active) {
    .jkl-modal {
      border-color: CanvasText;
    }
  }
}
@layer jokul.components {
  .jkl-modal-container--slide-in {
    --jkl-modal-slide-x: 0px;
    --jkl-modal-slide-y: 12px;
    transition-timing-function: ease-in;
    transition-duration: 250ms;
    transition-property: visibility;
    transition-duration: 0ms;
  }
  .jkl-modal-container--slide-in[aria-hidden=true] {
    display: flex;
    visibility: hidden;
    pointer-events: none;
    transition-delay: 250ms;
  }
  .jkl-modal-container--slide-in:not([aria-hidden=true]) {
    visibility: visible;
    transition-delay: 0ms;
  }
  .jkl-modal-container--slide-in .jkl-modal {
    transition-timing-function: ease-out;
    transition-duration: 250ms;
    transition-property: transform, opacity;
    transform: translate(var(--jkl-modal-slide-x), var(--jkl-modal-slide-y));
    opacity: 0;
    will-change: transform, opacity;
  }
  .jkl-modal-container--slide-in:not([aria-hidden=true]) .jkl-modal {
    transform: translate(0, 0);
    opacity: 1;
  }
  @media (prefers-reduced-motion: reduce) {
    .jkl-modal-container--slide-in .jkl-modal {
      transition-duration: 0ms;
    }
  }
}
@layer jokul.components {
  /* Placement: bottom */
  .jkl-modal-container--placement-bottom {
    align-items: flex-end;
  }
  .jkl-modal-container--placement-bottom.jkl-modal-container--slide-in {
    --jkl-modal-slide-x: 0px;
    --jkl-modal-slide-y: 24px;
  }
  .jkl-modal-container--placement-bottom .jkl-modal {
    --margin: 0px;
    width: min(100vw, var(--modal-width, 100vw));
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  /* Placement: left */
  .jkl-modal-container--placement-left {
    justify-content: flex-start;
  }
  .jkl-modal-container--placement-left.jkl-modal-container--slide-in {
    --jkl-modal-slide-x: -24px;
    --jkl-modal-slide-y: 0px;
  }
  .jkl-modal-container--placement-left .jkl-modal {
    height: 100%;
    max-height: 100%;
    margin-block: 0;
    margin-inline-start: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  /* Placement: right */
  .jkl-modal-container--placement-right {
    justify-content: flex-end;
  }
  .jkl-modal-container--placement-right.jkl-modal-container--slide-in {
    --jkl-modal-slide-x: 24px;
    --jkl-modal-slide-y: 0px;
  }
  .jkl-modal-container--placement-right .jkl-modal {
    height: 100%;
    max-height: 100%;
    margin-block: 0;
    margin-inline-end: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
}
@layer jokul.components {
  .jkl-modal-header {
    --jkl-modal-header-margin: 0 0 var(--jkl-unit-20);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin: var(--jkl-modal-header-margin);
  }
  .jkl-modal-body {
    font-size: var(--jkl-font-size-3);
    line-height: var(--jkl-line-height-relaxed);
    font-weight: 400;
    --jkl-icon-weight: 300;
  }
  .jkl-modal-title {
    font-size: var(--jkl-font-size-6);
    line-height: var(--jkl-line-height-tight);
    font-weight: 700;
    --jkl-icon-weight: 400;
  }
  .jkl-modal-actions {
    margin-block-start: var(--jkl-unit-50);
    display: flex;
    flex-direction: column;
    gap: var(--jkl-unit-15) var(--jkl-unit-20);
  }
  @container (width > 35ch /* ~380px ved vanlig zoom/size */) {
    .jkl-modal-actions {
      flex-direction: row-reverse;
      align-self: flex-end;
    }
  }
}