:root {
  --icon-color: #2f22f2;
  --icon-background-color: #ffffff;
}

.icons {
  --gap: 1em;
  --icon-size: 5em;
  --icon-container-size: calc(var(--icon-size) + 1em);
  --overlap-size: 2em;
  --hover-overlap-size: 4em;
  --border-size: 0.1em;
  --num-children-1: calc(var(--num-children) - 1);
  --grid-cell-size: var(--overlap-size);

  display: grid;
  grid-auto-flow: column;
  grid-template-columns: repeat(var(--num-children), var(--grid-cell-size));
  grid-auto-columns: var(--grid-cell-size);
  gap: var(--gap);

  margin-inline: auto;
  padding: var(--gap);
  width: calc(
    var(--grid-cell-size) * var(--num-children-1) + var(--gap) *
      var(--num-children) + var(--icon-size) + var(--border-size)
  );

  transition: all ease-in-out 0.25s;
}

.icons:hover {
  --grid-cell-size: var(--hover-overlap-size);
}

.icons > div {
  inline-size: var(--icon-container-size);
  aspect-ratio: 1;
  background-color: var(--icon-background-color);
  border-radius: var(--icon-container-size);
  padding: 0.5em;
  display: grid;
  place-content: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
  border: solid var(--border-size) transparent;
  transition: border 0.5s ease-in-out;
}

.icons .iconify {
  width: var(--icon-size);
  height: var(--icon-size);
  transition: all ease-in-out 0.15s;
  color: var(--icon-color);
}

.icons > div:hover {
  scale: 1.1;
  z-index: 100;
  border-width: var(--border-size);
  border-color: var(--icon-color);
}

.icons:where(:has(> *:nth-of-type(1):last-child)) {
  --num-children: 1;
}
.icons:where(:has(> *:nth-of-type(2):last-child)) {
  --num-children: 2;
}
.icons:where(:has(> *:nth-of-type(3):last-child)) {
  --num-children: 3;
}
.icons:where(:has(> *:nth-of-type(4):last-child)) {
  --num-children: 4;
}
.icons:where(:has(> *:nth-of-type(5):last-child)) {
  --num-children: 5;
}