// Octicon table optimization for pages with hundreds of repeated icons
// Uses CSS background images instead of inline SVGs to dramatically reduce HTML size

$octicon-check-path: "M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z";
$octicon-x-path: "M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z";

$light-color: "%23000000";
$dark-color: "%23ffffff";

@function octicon-svg($path, $color) {
  @return url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16' fill='#{$color}'%3E%3Cpath d='#{$path}'/%3E%3C/svg%3E");
}

@mixin octicon-bg-base {
  display: inline-block;
  width: 16px;
  height: 16px;
  text-indent: -9999px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
}

@mixin octicon-dark-mode($path) {
  [data-color-mode="dark"] & {
    background-image: octicon-svg($path, $dark-color);
  }

  @media (prefers-color-scheme: dark) {
    [data-color-mode="auto"][data-dark-theme*="dark"] & {
      background-image: octicon-svg($path, $dark-color);
    }
  }
}

.octicon-bg-check {
  @include octicon-bg-base;
  background-image: octicon-svg($octicon-check-path, $light-color);
  @include octicon-dark-mode($octicon-check-path);
}

.octicon-bg-x {
  @include octicon-bg-base;
  background-image: octicon-svg($octicon-x-path, $light-color);
  @include octicon-dark-mode($octicon-x-path);
}