.sprite-icon {
  --icon-size: var(--icon-size-base);
  --grid: 10;
  --tile-x: 0;
  --tile-y: 0;
  width: var(--icon-size);
  min-width: var(--icon-size);
  max-width: var(--icon-size);
  height: var(--icon-size);
  min-height: var(--icon-size);
  max-height: var(--icon-size);
  display: inline-block;
  position: relative;
}

.sprite-icon[data-icon-size="small"] {
  --icon-size: var(--icon-size-sm);
  border-radius: calc(var(--icon-size) / 2);
}

.sprite-icon[data-icon-size="large"] {
  --icon-size: var(--icon-size-lg);
  border-radius: calc(var(--icon-size) / 2);
}

.sprite-icon[data-icon-size="xlarge"] {
  --icon-size: var(--icon-size-xl);
  border-radius: calc(var(--icon-size) / 2);
}

.sprite-icon::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('sprite.png');
  background-repeat: no-repeat;
  background-size: calc(var(--icon-size) * var(--grid)) calc(var(--icon-size) * var(--grid));
  background-position: calc(var(--tile-x) * -1 * var(--icon-size)) calc(var(--tile-y) * -1 * var(--icon-size));
}

/* 1x1 tile icons on 10x10 grid */
.sprite-icon[data-icon-type="group"]      { --tile-x: 0; --tile-y: 4; }
.sprite-icon[data-icon-type="seaScout"]   { --tile-x: 1; --tile-y: 4; }
.sprite-icon[data-icon-type="airScout"]   { --tile-x: 2; --tile-y: 4; }
.sprite-icon[data-icon-type="homeSchool"] { --tile-x: 3; --tile-y: 4; }
.sprite-icon[data-icon-type="partner"]    { --tile-x: 4; --tile-y: 4; }

/* Action icons */
.sprite-icon[data-icon-type="location"],
.sprite-icon[data-icon-type="map"]        { --tile-x: 5; --tile-y: 4; }

.sprite-icon[data-icon-type="location_alt"] { --tile-x: 6; --tile-y: 4; }
.sprite-icon[data-icon-type="email"]        { --tile-x: 6; --tile-y: 5; }

.sprite-icon[data-icon-type="link"],
.sprite-icon[data-icon-type="website"]   { --tile-x: 5; --tile-y: 5; }

/* Detail badges */
.sprite-icon[data-icon-type="cake"]       { --tile-x: 7; --tile-y: 4; }
.sprite-icon[data-icon-type="info"]      { --tile-x: 8; --tile-y: 4; }
.sprite-icon[data-icon-type="islam"]     { --tile-x: 9; --tile-y: 4; }

.sprite-icon[data-icon-type="tada"]       { --tile-x: 0; --tile-y: 5; }
.sprite-icon[data-icon-type="waitList"]  { --tile-x: 1; --tile-y: 5; }
.sprite-icon[data-icon-type="rocket"] { --tile-x: 2; --tile-y: 5; }
.sprite-icon[data-icon-type="kayaking"]     { --tile-x: 7; --tile-y: 5; }
.sprite-icon[data-icon-type="outdoor"]   { --tile-x: 8; --tile-y: 5; }

/* Social media */
.sprite-icon[data-icon-type="link_instagram"] { --tile-x: 3; --tile-y: 5; }
.sprite-icon[data-icon-type="link_facebook"]  { --tile-x: 4; --tile-y: 5; }

/* Not really an icon */
.sprite-icon[data-icon-type="freeText"] { visibility: hidden; }

/* 2x2 section icons treated as 1x1 tiles on a 5x5 grid */
.sprite-icon[data-icon-type="squirrels"],
.sprite-icon[data-icon-type="beavers"],
.sprite-icon[data-icon-type="cubs"],
.sprite-icon[data-icon-type="scouts"],
.sprite-icon[data-icon-type="explorers"],
.sprite-icon[data-icon-type="fleurDeLis"],
.sprite-icon[data-icon-type="district"] {
  --grid: 5;
}

/* Positions on 5x5 grid using percentage coordinates */
.sprite-icon[data-icon-type="squirrels"]::after    { background-position: 0% 0%; }
.sprite-icon[data-icon-type="beavers"]::after      { background-position: 25% 0%; }
.sprite-icon[data-icon-type="cubs"]::after         { background-position: 50% 0%; }
.sprite-icon[data-icon-type="scouts"]::after       { background-position: 75% 0%; }
.sprite-icon[data-icon-type="explorers"]::after    { background-position: 100% 0%; }
.sprite-icon[data-icon-type="fleurDeLis"]::after { background-position: 100% 75%; }
.sprite-icon[data-icon-type="district"]::after     { background-position: 75% 75%; }

/* ==========================================================================
   SECTION LOGO ICONS (double size)
   ========================================================================== */
.sprite-section-logo {
  width: var(--icon-size-button);
  min-width: var(--icon-size-button);
  max-width: var(--icon-size-button);
  height: var(--icon-size-button);
  min-height: var(--icon-size-button);
  max-height: var(--icon-size-button);
  display: inline-block;
  position: relative;
}

.sprite-section-logo::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('sprite.png');
  background-repeat: no-repeat;
  background-size: calc(5 * var(--icon-size-button)) calc(5 * var(--icon-size-button));
}

/* Default state */
.sprite-section-logo[data-icon-type="squirrels"]::after  { background-position: 0 0; }
.sprite-section-logo[data-icon-type="beavers"]::after    { background-position: 25% 0; }
.sprite-section-logo[data-icon-type="cubs"]::after       { background-position: 50% 0; }
.sprite-section-logo[data-icon-type="scouts"]::after     { background-position: 75% 0; }
.sprite-section-logo[data-icon-type="explorers"]::after  { background-position: 100% 0; }
.sprite-section-logo[data-icon-type="fleur-de-lis"]::after { background-position: 100% 75%; }
.sprite-section-logo[data-icon-type="district"]::after   { background-position: 75% 75%; }

/* Hover state */
button:hover .sprite-section-logo[data-icon-type="squirrels"]::after, .sprite-section-logo[data-icon-type="squirrels"]:hover::after   { background-position: 0% 25%; }
button:hover .sprite-section-logo[data-icon-type="beavers"]::after, .sprite-section-logo[data-icon-type="beavers"]:hover::after    { background-position: 25% 25%; }
button:hover .sprite-section-logo[data-icon-type="cubs"]::after, .sprite-section-logo[data-icon-type="cubs"]:hover::after       { background-position: 50% 25%; }
button:hover .sprite-section-logo[data-icon-type="scouts"]::after, .sprite-section-logo[data-icon-type="scouts"]:hover::after     { background-position: 75% 25%; }
button:hover .sprite-section-logo[data-icon-type="explorers"]::after, .sprite-section-logo[data-icon-type="explorers"]:hover::after  { background-position: 100% 25%; }
/* Note: fleur-de-lis does not have a specified hover state in the sprite sheet */