:root {
    --icon-size: 32px;
    --border: 20px;
    --blue1: rgb(153, 193, 241);
    --blue2: rgb(98, 160, 234);
    --blue3: rgb(53, 132, 228);
    --blue4: rgb(28, 113, 216);
    --blue5: rgb(26, 95, 180);
    --green1: rgb(143, 240, 164);
    --green2: rgb(87, 227, 137);
    --green3: rgb(51, 209, 122);
    --green4: rgb(46, 194, 126);
    --green5: rgb(38, 162, 105);
    --yellow1: rgb(249, 240, 107);
    --yellow2: rgb(248, 228, 92);
    --yellow3: rgb(246, 211, 45);
    --yellow4: rgb(245, 194, 17);
    --yellow5: rgb(229, 165, 10);
    --orange1: rgb(255, 190, 111);
    --orange2: rgb(255, 163, 72);
    --orange3: rgb(255, 120, 0);
    --orange4: rgb(230, 97, 0);
    --orange5: rgb(198, 70, 0);
    --red1: rgb(246, 97, 81);
    --red2: rgb(237, 51, 59);
    --red3: rgb(224, 27, 36);
    --red4: rgb(192, 28, 40);
    --red5: rgb(165, 29, 45);
    --purple1: rgb(220, 138, 221);
    --purple2: rgb(192, 97, 203);
    --purple3: rgb(145, 65, 172);
    --purple4: rgb(129, 61, 156);
    --purple5: rgb(97, 53, 131);
    --brown1: rgb(205, 171, 143);
    --brown2: rgb(181, 131, 90);
    --brown3: rgb(152, 106, 68);
    --brown4: rgb(134, 94, 60);
    --brown5: rgb(99, 69, 44);
    --light1: rgb(255, 255, 255);
    --light2: rgb(246, 245, 244);
    --light3: rgb(222, 221, 218);
    --light4: rgb(192, 191, 188);
    --light5: rgb(154, 153, 150);
    --dark1: rgb(119, 118, 123);
    --dark2: rgb(94, 92, 100);
    --dark3: rgb(61, 56, 70);
    --dark4: rgb(36, 31, 49);
    --dark5: rgb(0, 0, 0);
    --text: #f6f5f4;
    --pill: 64px;
    --cantarell: "Cantarell", sans-serif;
    --inter: InterVariable, "Inter Variable", Inter, sans-serif;
    --pagewidth: min(calc(var(--icon-size) * 30), 100%);
    --grid-gap: 3rem;
    --pagegridwidth: calc(var(--pagewidth) +  (6 * var(--grid-gap)));
    --btnround: 500px;
    --btn-fg: #000;
    --btn-bg: rgba(0,0,0,0.1);
    --fg-color: #000;
    --warning-color: var(--orange5);
    --success-color: var(--green5);
    --error-color: var(--red5);
    --btn-fg-dark: #fff;
    --btn-bg-dark: rgba(255,255,255,0.12);
    --btnsqr: 0.8rem;
    --bg-color: #eee;
    --narrowwidth: 60%;
    --defaultsize: 18px;
    --slickease: cubic-bezier(.17,.89,.32,1.28);
    --tile-bg: var(--light1);
    --tile-mid: #ddd;
    --osdfgcolor: var(--dark1);
    --osdbgcolor: var(--light1);
    --link: var(--blue5);
    font-feature-settings: 'liga' 1, 'calt' 1, 'cv05' 1; /* Inter features */
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --fg-color: #eee;
      --warning-color: var(--orange1);
      --success-color: var(--green1);
      --error-color: var(--red1);
      --bg-color: var(--dark4);
      --bg-color: hsl(from var(--dark4) h calc(s * .5) l);
      --btn-fg: var(--btn-fg-dark);
      --btn-bg: var(--btn-bg-dark);
      --tile-bg: var(--dark5);
      --tile-mid: var(--dark3);
      --osdfgcolor: var(--dark1);
      --osdbgcolor: var(--dark5);
      --osdbgcolor: hsl(from var(--bg-color) h s calc(l * .9) );
      --link: var(--orange3);
    }
  }

  html, body {
    margin: 0; padding: 0;
    background-color: var(--bg-color);
    color: var(--fg-color);
    font-size: var(--defaultsize);
    font-family: var(--inter);
  }

  body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
  }
  a { color: var(--link); }

  h1 {
    max-width: var(--pagewidth);
    margin: 1rem auto .5rem;
    padding: 1rem;
  }

  .icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, var(--icon-size));
    gap: 16px;
    max-width: var(--pagewidth);
    margin: 0 auto;
    padding: 1rem;
    box-sizing: border-box;
    justify-content: center;

    & svg {
      width: 100% !important;
      height: 100% !important;
      max-width: 100%;
      max-height: 100%;
      display: block;
      overflow: visible;
      stroke: var(--fg-color);

      & .foreground-stroke { stroke: var(--fg-color) !important; }
      & .foreground-fill { fill: var(--fg-color) !important; }
      & .warning-stroke { stroke: var(--warning-color) !important; }
      & .warning-fill { fill: var(--warning-color) !important; }
      & .success-stroke { stroke: var(--success-color) !important; }
      & .success-fill { fill: var(--success-color) !important; }
      & .error-stroke { stroke: var(--error-color) !important; }
      & .error-fill { fill: var(--error-color) !important; }
      transition: transform 1s var(--slickease);

      & path,circle,ellipse,polygon {
        &[ns1:stroke="foreground"] { stroke: var(--fg-color) !important; }
        &[ns1:fill="none"] { fill: none !important; }
      }
      
      &:hover {
        transform: scale(1.5);
        transition: transform 200ms var(--slickease);
      }
    }
  }

  .stroke-control {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--osdbgcolor);
    color: var(--osdfgcolor);
    box-shadow: 0 2px 2px rgba(0,0,0,.3);
    padding: 1.5rem 2rem;
    border-radius: var(--border);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    z-index: 1000;

    & button {
      border: none;
      background-color: rgb(from var(--fg-color) r g b / 0.5);
      border-radius: 6px;
      padding: 0.25rem 0.75rem;
      cursor: pointer;
      font-size: 0.9rem;
      color: var(--bg-color);

      &.active { background-color: rgb(from var(--fg-color) r g b / 1.0); }
    }

    & label,input { cursor: pointer; user-select: none; }
  }


  #size-buttons {
    display: inline-flex;
    gap: 0.5rem;
  }

  #stroke-slider {
    width: 100%;
  }

  #icon-search {
    padding: 0.5rem 1rem;
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,0.2);
    font-size: 1rem;
    width: 100%;
    box-sizing: border-box;
    background: var(--bg-color);
    color: var(--fg-color);
  }

  aside {
    max-width: calc(var(--pagewidth) * 0.8);
    margin: 1rem auto;
    font-size: 80%;
    text-align: center;
    opacity: 0.5;
    padding-bottom: 15rem; /* allow content to scroll from under the overlay */
  }


#icon-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;

  & .overlay-bg {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  & #overlay-content { /* popover */
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: hsl(from var(--bg-color) h s calc(l * 1.1));
    padding: calc(var(--defaultsize) * 2);
    border-radius: var(--border);
    text-align: center;
    z-index: 1;
    min-width: 30vw;

    transform: scale(0.8);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;

    & .icon {
      width: calc(var(--icon-size) * 8);
      height: calc(var(--icon-size) * 8);
      align-self: center;
      overflow: visible;

      & svg {
        overflow: visible;
        opacity: .5;
        & .foreground-stroke { stroke: var(--fg-color) !important; }
        & .foreground-fill { fill: var(--fg-color) !important; }
        }
    }

    & .close {
      position: absolute;
      top: var(--defaultsize);
      right: var(--defaultsize);
      width: 32px; height: 32px;
      background: none;
      border: none;
      font-size: 24px;
      cursor: pointer;
      padding: 6px;
      border-radius: 999px;

      &:hover {
        background-color: rgb(from var(--fg-color) r g b / 0.05);
      }

      & svg {
        display: block;
        width: 100%;
        height: 100%;
        & path { fill: var(--fg-color); }
      }
    }

    & .tags {
      font-size: 70%;
      max-width: 20rem;
      font-weight: 700;

      span {
        display: inline-block;
        background-color: rgb(from var(--fg-color) r g b / 0.05);
        border-radius: 999px;
        padding: 0.3rem 0.5rem;
        margin: 2px 1px;
      }
    }
  }

  /*  Active state */
  &.active {
    display: flex;

    & .overlay-bg {
      opacity: 1;
    }

    & #overlay-content {
      transform: scale(1);
      opacity: 1;
      transition: all 300ms var(--slickease);
    }
  }
}

.search-wrapper {
  position: relative;
  display: inline-block;
}

#icon-search {
  padding-right: 28px;
}

#clear-search {
  position: absolute;
  right: 0px;
  top: 53%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  font-size: 16px;
  cursor: pointer;
  display: none;
  opacity: .6;

  svg {
    width: 24px;
    height: 24px;
    stroke: var(--fg-color);
  }
}

#clear-search:hover {
  opacity: 1;
}