api-fetch-compat.css

/**
 * css-api-fetch
 * BSD 2-Clause License
 * Copyright (c) Jane Ori, PropJockey, 2025
 */

@property --api-w-px { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --api-h-px { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --api-w { syntax: "<integer>"; inherits: true; initial-value: 0; }
@property --api-h { syntax: "<integer>"; inherits: true; initial-value: 0; }
@property --api-ready { syntax: "<integer>"; inherits: true; initial-value: 0; }

.css-api-fetch-compat {
  --api_height: var(--api-height, 0px);
  --api_width: var(--api-width, 0px);
  --api_fetch: var(--api-fetch, none);
  height: var(--api_height);
  width: var(--api_width);
  overflow: hidden;
  position: relative;
  *, & { margin: 0px; padding: 0px; box-sizing: border-box; }
  &.api-debug-compat-on .api-response-compat::after {
    counter-reset: w var(--api-w) h var(--api-h);
    content: "w: " counter(w) " h: " counter(h);
  }
  .api-fetch-compat {
    visibility: hidden;
    position: absolute;
    &::after {
      content: var(--api_fetch);
      display: block;
      font-size: 0;
    }
    .api-parse-compat {
      container: api-response-compat / size;
      position: absolute;
      inset: 0px;
      .api-response-compat {
        visibility: visible;
        position: absolute;
        height: var(--api_height);
        width: var(--api_width);
        --api-w-px: 100cqw;
        --api-h-px: 100cqh;
        --api-w: calc(10000 * tan(atan2(var(--api-w-px), 10000px)));
        --api-h: calc(10000 * tan(atan2(var(--api-h-px), 10000px)));
        --api-ready: min(1,
          min(1, var(--api-w)) +
          min(1, var(--api-h))
        );
      }
    }
  }
}