@import "@fontsource/maple-mono/index.css";
@import "@fontsource/charis-sil/index.css";
/* Breakpoint Queries, Using Bootstrap's */
/* Smallest: 576px */

@custom-media --sm (width >=576px);
@custom-media --md (width >=768px);
@custom-media --lg (width >=1200px);
@custom-media --xl (width >=1700px);

.container {
  --gutter: var(--2);
  margin: 0 var(--gutter);
}

@media (--md) {
  .container {
    --gutter: var(--10);
  }
}

@media (--xl) {
  .container {
    --gutter: var(--14);
  }
}

/* Color Definitions */
:root {
  --text: #cecece;
  --background: #110f12;
  --primary: #0ee19b;
  --secondary: #012d1e;
  --accent: #53d164;

  --font-maple-mono: "Maple Mono", "monospace";
  --font-charis-sil: "Charis", "serif";
}

/* Color Aliases */

h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
  font-family: var(--font-maple-mono);
}

nav a,
pre,
code {
  font-family: var(--font-maple-mono);
}

:root {
  font-family: var(--font-charis);
}

/* Spacing Scale, Major Third */
:root {
  /* 1rem = 16px */
  --scale: 1.25;
  --small: calc(1rem * pow(var(--scale), -1));
  --half: calc(1rem * pow(var(--scale), -0.5));
  --1: calc(1rem * pow(var(--scale), 0));
  --2: calc(1rem * pow(var(--scale), 1));
  --3: calc(1rem * pow(var(--scale), 2));
  --4: calc(1rem * pow(var(--scale), 3));
  --5: calc(1rem * pow(var(--scale), 4));
  --6: calc(1rem * pow(var(--scale), 5));
  --7: calc(1rem * pow(var(--scale), 6));
  --8: calc(1rem * pow(var(--scale), 7));
  --9: calc(1rem * pow(var(--scale), 8));
  --10: calc(1rem * pow(var(--scale), 9));
  --11: calc(1rem * pow(var(--scale), 10));
  --12: calc(1rem * pow(var(--scale), 11));
  --14: calc(1rem * pow(var(--scale), 13));
  --component-padding: var(--small) var(--1);
}

/* Element Defaults */

small {
  font-size: var(--small);
  color: var(--text-disabled);
}

h1 {
  font-size: var(--5);
}

h2 {
  font-size: var(--4);
}

h3 {
  font-size: var(--3);
}

h4 {
  font-size: var(--2);
}

h5 {
  font-size: var(--1);
}

body {
  color: var(--text);
  background-color: var(--background);
}

a {
  color: var(--accent);

  &:hover {
    text-decoration: underline;
  }
}

button,
button.primary,
[role="button"] {
  padding: var(--component-padding);
  color: var(--text);
  border-radius: 10px;
  border: solid 2px transparent;
  background-color: var(--secondary);
  cursor: pointer;
  transition: background-color 100ms linear;
  text-decoration: none;
}

button:active,
[role="button"]:active {
  filter: hue-rotate(50deg);
}

button:hover,
[role="button"]:hover {
  filter: saturate(150%);
}

.gradient-text {
  background: linear-gradient(120deg, var(--primary), var(--accent) 70%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Tooltips */
[data-tooltip] {
  position: relative;

  &[data-placement="top"]::before,
  &[data-placement="top"]::after,
  &::before,
  &::after {
    display: block;
    z-index: 99;
    position: absolute;
    bottom: 100%;
    left: 50%;
    padding: 0.25rem 0.5rem;
    overflow: hidden;
    transform: translate(-50%, -0.25rem);
    border-radius: 5px;
    background: var(--secondary);
    content: attr(data-tooltip);
    color: var(--text);
    font-style: normal;
    font-size: 0.875rem;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
  }

  &[data-placement="top"]::after,
  &::after {
    padding: 0;
    transform: translate(-50%, 0rem);
    border-top: 0.3rem solid;
    border-right: 0.3rem solid transparent;
    border-left: 0.3rem solid transparent;
    border-radius: 0;
    background-color: transparent;
    content: "";
    color: var(--secondary);
  }

  &[data-placement="bottom"] {
    &::before,
    &::after {
      top: 100%;
      bottom: auto;
      transform: translate(-50%, 0.25rem);
    }

    &:after {
      transform: translate(-50%, -0.3rem);
      border: 0.3rem solid transparent;
      border-bottom: 0.3rem solid;
    }
  }

  &[data-placement="left"] {
    &::before,
    &::after {
      top: 50%;
      right: 100%;
      bottom: auto;
      left: auto;
      transform: translate(-0.25rem, -50%);
    }

    &:after {
      transform: translate(0.3rem, -50%);
      border: 0.3rem solid transparent;
      border-left: 0.3rem solid;
    }
  }

  &[data-placement="right"] {
    &::before,
    &::after {
      top: 50%;
      right: auto;
      bottom: auto;
      left: 100%;
      transform: translate(0.25rem, -50%);
    }

    &:after {
      transform: translate(-0.3rem, -50%);
      border: 0.3rem solid transparent;
      border-right: 0.3rem solid;
    }
  }

  &:focus,
  &:hover {
    &::before,
    &::after {
      opacity: 1;
    }
  }

  @media (hover: hover) and (pointer: fine) {
    &:focus,
    &:hover {
      &::before,
      &::after {
        --tooltip-slide-to: translate(-50%, -0.25rem);
        transform: translate(-50%, 0.75rem);
        animation-duration: 0.2s;
        animation-fill-mode: forwards;
        animation-name: tooltip-slide;
        opacity: 0;
      }

      &::after {
        --tooltip-caret-slide-to: translate(-50%, 0rem);
        transform: translate(-50%, -0.25rem);
        animation-name: tooltip-caret-slide;
      }
    }

    &[data-placement="bottom"] {
      &:focus,
      &:hover {
        &::before,
        &::after {
          --tooltip-slide-to: translate(-50%, 0.25rem);
          transform: translate(-50%, -0.75rem);
          animation-name: tooltip-slide;
        }

        &::after {
          --tooltip-caret-slide-to: translate(-50%, -0.3rem);
          transform: translate(-50%, -0.5rem);
          animation-name: tooltip-caret-slide;
        }
      }
    }

    &[data-placement="left"] {
      &:focus,
      &:hover {
        &::before,
        &::after {
          --tooltip-slide-to: translate(-0.25rem, -50%);
          transform: translate(0.75rem, -50%);
          animation-name: tooltip-slide;
        }

        &::after {
          --tooltip-caret-slide-to: translate(0.3rem, -50%);
          transform: translate(0.05rem, -50%);
          animation-name: tooltip-caret-slide;
        }
      }
    }

    &[data-placement="right"] {
      &:focus,
      &:hover {
        &::before,
        &::after {
          --tooltip-slide-to: translate(0.25rem, -50%);
          transform: translate(-0.75rem, -50%);
          animation-name: tooltip-slide;
        }

        &::after {
          --tooltip-caret-slide-to: translate(-0.3rem, -50%);
          transform: translate(-0.05rem, -50%);
          animation-name: tooltip-caret-slide;
        }
      }
    }
  }
}

@keyframes tooltip-slide {
  to {
    transform: var(--tooltip-slide-to);
    opacity: 1;
  }
}

@keyframes tooltip-caret-slide {
  50% {
    opacity: 0;
  }

  to {
    transform: var(--tooltip-caret-slide-to);
    opacity: 1;
  }
}