/**
 * Do not edit directly, this file was auto-generated.
 */
@layer jokul.components {
  @property --jkl-skeleton-sweeper-position {
    syntax: "<percentage>";
    initial-value: 0%;
    inherits: true;
  }
  .jkl-skeleton-animation {
    --jkl-skeleton-element-color: var(--jkl-color-background-container-low);
    --jkl-skeleton-sweep-duration: 4500ms;
    --jkl-skeleton-sweeper-width: 40%;
    mask-image: linear-gradient(to right, #000 calc(var(--jkl-skeleton-sweeper-position) - var(--jkl-skeleton-sweeper-width)), transparent calc(var(--jkl-skeleton-sweeper-position) - var(--jkl-skeleton-sweeper-width) / 2), #000 var(--jkl-skeleton-sweeper-position));
    mask-size: 100dvi 100dvb;
    mask-position: center;
    animation: var(--jkl-skeleton-sweep-duration) ease-in-out infinite --jkl-skeleton-sweep;
  }
  .jkl-skeleton-element {
    border-radius: 0.125rem;
    background-color: var(--jkl-skeleton-element-color);
  }
  .jkl-skeleton-element--circle {
    border-radius: 50%;
  }
  @media screen and (forced-colors: active) {
    .jkl-skeleton-element {
      border: 1px solid CanvasText;
      animation: 2s ease infinite jkl-blink-ud5fokl;
    }
  }
  .jkl-skeleton-input {
    display: flex;
    flex-direction: column;
    gap: var(--jkl-spacing-12);
  }
  .jkl-skeleton-input__checkbox {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--jkl-spacing-8);
  }
  @media (width >= 0) and (max-width: 679px) {
    .jkl-skeleton-input {
      gap: var(--jkl-spacing-8);
    }
  }
  .jkl-skeleton-input--compact::after {
    gap: var(--jkl-spacing-8);
  }
  .jkl-skeleton-table {
    display: flex;
    flex-direction: column;
  }
  .jkl-skeleton-table__header, .jkl-skeleton-table__row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-bottom: solid 1px var(--jkl-skeleton-element-color);
  }
  .jkl-skeleton-table__header {
    padding: var(--jkl-unit-20) var(--jkl-unit-10);
  }
  .jkl-skeleton-table__row {
    padding: var(--jkl-unit-20) var(--jkl-unit-10);
  }
  @media (width >= 0) and (max-width: 679px) {
    .jkl-skeleton-table__header {
      padding: var(--jkl-unit-10) var(--jkl-unit-05);
    }
    .jkl-skeleton-table__row {
      padding: var(--jkl-unit-20) var(--jkl-unit-05);
    }
  }
  @media screen and (forced-colors: active) {
    .jkl-skeleton-table {
      animation: 2s ease-in-out infinite jkl-blink-ud5fokl;
    }
  }
  @keyframes jkl-blink-ud5fokl {
    0% {
      opacity: 1;
    }
    40%, 50% {
      opacity: 0.3;
    }
    70%, 100% {
      opacity: 1;
    }
  }
  @keyframes --jkl-skeleton-sweep {
    0%, 67% {
      --jkl-skeleton-sweeper-position: 0%;
    }
    100% {
      --jkl-skeleton-sweeper-position: calc(100% + var(--jkl-skeleton-sweeper-width));
    }
  }
}