/* docara-shell-source: runtime/component/skeleton/css/skeleton.css */
@layer sf.components {
  /* utility-hint: flex/1 (.flex-1) display/flex (.flex) */
  .sf-skeleton {
    --sf-skeleton-base: var(--sf-ui-skeleton);
    --sf-skeleton-highlight: var(--sf-surface-container-active);
    --sf-skeleton-duration: calc(var(--sf-duration-slow) * 3);
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  /* A bar stands for a line of text, so it takes a line's room: the text's
     line height, with the bar -- as tall as the letters, the text size -- in
     the middle of it: at size 1, a bar two thirds of its line. A bar as
     tall as the letters and nothing around it made a loading row thinner than
     the row it stood for, and the page jumped when the data came (owner,
     2026-10-14). Lines follow one another with no gap, as lines of text do. */
  .sf-skeleton-text {
    position: relative;
    overflow: hidden;
    background: var(--sf-skeleton-base);
    border-radius: var(--sf-radius--ui);
    height: var(--sf-skeleton-text--height);
    block-size: var(--sf-skeleton-text--height);
    flex: none;
  }
  /* Only a line of text has a line's room; a circle, a block or a bar given its
     own height is as tall as it says. */
  .sf-skeleton-text:not(.sf-skeleton-circle):not(.sf-skeleton-square):not(.sf-skeleton-rounded):not(.sf-skeleton-icon):not([style*=block-size]) {
    margin-top: calc((var(--sf-skeleton-text--height) - var(--sf-skeleton-text--height)) / 2);
    margin-bottom: calc((var(--sf-skeleton-text--height) - var(--sf-skeleton-text--height)) / 2);
    margin-block: calc((var(--sf-skeleton-text--height) - var(--sf-skeleton-text--height)) / 2);
    margin-top: calc((var(--sf-skeleton-text--height) - var(--sf-skeleton-text--height)) / 2);
    margin-top: calc((var(--sf-skeleton-text--line, var(--sf-skeleton-text--height)) - var(--sf-skeleton-text--height)) / 2);
    margin-bottom: calc((var(--sf-skeleton-text--height) - var(--sf-skeleton-text--height)) / 2);
    margin-bottom: calc((var(--sf-skeleton-text--line, var(--sf-skeleton-text--height)) - var(--sf-skeleton-text--height)) / 2);
    margin-block: calc((var(--sf-skeleton-text--line, var(--sf-skeleton-text--height)) - var(--sf-skeleton-text--height)) / 2);
  }
  .sf-skeleton--animation-pulse .sf-skeleton-text {
    -webkit-animation: sf-skeleton-pulse var(--sf-skeleton-duration) var(--sf-animation) infinite;
            animation: sf-skeleton-pulse var(--sf-skeleton-duration) var(--sf-animation) infinite;
  }
  .sf-skeleton--animation-wave .sf-skeleton-text::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    inset: 0;
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
    background-image: linear-gradient(90deg, var(--sf-transparent), var(--sf-skeleton-highlight), var(--sf-transparent));
    -webkit-animation: sf-skeleton-wave var(--sf-skeleton-duration) var(--sf-animation) infinite;
            animation: sf-skeleton-wave var(--sf-skeleton-duration) var(--sf-animation) infinite;
  }
  .sf-skeleton--animation-none .sf-skeleton-text,
  .sf-skeleton--animation-none .sf-skeleton-text::after {
    -webkit-animation: none;
            animation: none;
  }
  .sf-skeleton-text--size-1 {
    --sf-skeleton-text--height: var(--sf-text-size-1);
    --sf-skeleton-text--line: var(--sf-text-height-1);
  }
  .sf-skeleton-text--size-2 {
    --sf-skeleton-text--height: var(--sf-text-size-2);
    --sf-skeleton-text--line: var(--sf-text-height-2);
  }
  .sf-skeleton-text--size-3 {
    --sf-skeleton-text--height: var(--sf-text-size-3);
    --sf-skeleton-text--line: var(--sf-text-height-3);
  }
  .sf-skeleton-text--size-4 {
    --sf-skeleton-text--height: var(--sf-text-size-4);
    --sf-skeleton-text--line: var(--sf-text-height-4);
  }
  .sf-skeleton-text--size-5 {
    --sf-skeleton-text--height: var(--sf-text-size-5);
    --sf-skeleton-text--line: var(--sf-text-height-5);
  }
  .sf-skeleton-text--size-6 {
    --sf-skeleton-text--height: var(--sf-text-size-6);
    --sf-skeleton-text--line: var(--sf-text-height-6);
  }
  .sf-skeleton-text--size-7 {
    --sf-skeleton-text--height: var(--sf-text-size-7);
    --sf-skeleton-text--line: var(--sf-text-height-7);
  }
  .sf-skeleton-text--size-1\/2 {
    --sf-skeleton-text--height: var(--sf-text-size-1\/2);
    --sf-skeleton-text--line: var(--sf-text-height-1\/2);
  }
  .sf-skeleton-text--size-1\/3 {
    --sf-skeleton-text--height: var(--sf-text-size-1\/3);
    --sf-skeleton-text--line: var(--sf-text-height-1\/3);
  }
  .sf-skeleton-text--size-1\/4 {
    --sf-skeleton-text--height: var(--sf-text-size-1\/4);
    --sf-skeleton-text--line: var(--sf-text-height-1\/4);
  }
  .sf-skeleton-text--size-1\/5 {
    --sf-skeleton-text--height: var(--sf-text-size-1\/5);
  }
  .sf-skeleton-text--size-1\/6 {
    --sf-skeleton-text--height: var(--sf-text-size-1\/6);
  }
  .sf-skeleton-text--size-1\/7 {
    --sf-skeleton-text--height: var(--sf-text-size-1\/7);
  }
  .sf-skeleton-icon {
    width: var(--sf-skeleton-text--height);
    inline-size: var(--sf-skeleton-text--height);
  }
  .sf-skeleton-circle {
    border-radius: var(--sf-radius-circle);
  }
  .sf-skeleton-square {
    border-radius: 0;
  }
  .sf-skeleton-rounded {
    border-radius: var(--sf-radius--ui);
  }
  .sf-skeleton--animation-wave .sf-skeleton-text {
    overflow: hidden;
  }
  @-webkit-keyframes sf-skeleton-pulse {
    50% {
      opacity: var(--sf-opacity-60);
    }
  }
  @keyframes sf-skeleton-pulse {
    50% {
      opacity: var(--sf-opacity-60);
    }
  }
  @-webkit-keyframes sf-skeleton-wave {
    0% {
      -webkit-transform: translateX(-100%);
              transform: translateX(-100%);
    }
    100% {
      -webkit-transform: translateX(100%);
              transform: translateX(100%);
    }
  }
  @keyframes sf-skeleton-wave {
    0% {
      -webkit-transform: translateX(-100%);
              transform: translateX(-100%);
    }
    100% {
      -webkit-transform: translateX(100%);
              transform: translateX(100%);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .sf-skeleton--animation-pulse .sf-skeleton-text,
    .sf-skeleton--animation-wave .sf-skeleton-text::after {
      -webkit-animation: none;
              animation: none;
    }
  }
  @media (forced-colors: active) {
    .sf-skeleton-text {
      background: CanvasText;
      opacity: var(--sf-opacity-30);
    }
    .sf-skeleton--animation-wave .sf-skeleton-text::after {
      display: none;
    }
  }
}