@import '../../../node_modules/modern-normalize/modern-normalize';
@import '../../../node_modules/hsluv-sass/src/hsluv';
@import 'fonts';

/* :root-insert */

$small-breakpoint: 600px;
$medium-breakpoint: 900px;
$large-breakpoint: 1200px;
$extra-large-breakpoint: 1800px;

html {
  font-size: 62.5%;
}

body {
  background-color: var(--background-1);
  color: var(--foreground-1);
  font-family: Inter, sans-serif;
  font-size: 2rem;
}

a,
a:visited {
  color: var(--dark-accent-7);

  &:hover {
    color: var(--dark-accent-4);
  }

  &[href^='http']:not(.hide-external) {
    margin-right: 12px;

    &::after {
      content: '↗';
      font-size: 1.5rem;
      position: absolute;
    }
  }
}

h1 {
  padding: 16px;
}

h1,
h2,
h3,
p {
  margin: 0;
}

ol,
ul {
  margin: 0;
  padding-left: 32px;
}

section {
  background-color: var(--background-1);
}

ul {
  list-style-type: symbols(cyclic '♡' '♥');
}

#wrapper {
  margin: 0 16px;
}

@media (min-width: $medium-breakpoint) {
  #wrapper {
    margin: 0 auto;
    width: $medium-breakpoint;
  }
}

.light {
  background-color: var(--foreground-1);
  color: var(--background-1);

  a,
  a:visited {
    color: var(--light-accent-8);

    &:hover {
      color: var(--light-accent-10);
    }
  }
}

.border {
  border: 2px solid var(--foreground-1);
}

.divider {
  border-top: 2px solid var(--foreground-1);
  margin: 32px 0;
}

.monospace {
  font-family: Hasklig, monospace;
}

.spacer {
  margin-bottom: 32px;
}

.goals {
  border: 2px solid;

  h2 {
    padding: 16px;
  }
}

.goal {
  padding: 16px;

  &:nth-child(even) {
    background-color: var(--background-1);
    color: var(--foreground-1);
  }

  &:nth-child(odd) {
    background-color: var(--foreground-1);
    color: var(--background-1);
  }
}

.goal-title {
  display: block;
  padding-bottom: 8px;
}

.cupcake-ipsum {
  h2 {
    background-color: var(--foreground-1);
    color: var(--background-1);
    padding: 16px;
  }

  p {
    padding: 16px;
  }
}

.dark-labels,
.light-labels,
.dark-outline-labels,
.light-outline-labels {
  display: flex;
  justify-content: space-between;
  padding: 16px;
  overflow-x: auto;

  span {
    font-family: Hasklig, monospace;
    font-weight: bold;
    margin-right: 8px;
    padding: 8px;
    text-align: center;
    width: 100px;

    &:last-child {
      margin-right: 0;
    }
  }
}

.dark-labels {
  border: 2px solid var(--foreground-1);
  color: var(--background-1);

  @for $index from 1 through 10 {
    span:nth-child(#{$index}) {
      background-color: var(--dark-accent-#{$index});
    }
  }
}

.light-labels {
  background-color: var(--foreground-1);

  @for $index from 1 through 10 {
    span:nth-child(#{$index}) {
      background-color: var(--light-accent-#{$index});
    }
  }
}

.dark-outline-labels {
  border: 2px solid;

  @for $index from 1 through 10 {
    span:nth-child(#{$index}) {
      $color: var(--dark-accent-#{$index});
      border: 2px solid $color;
      box-shadow: 0 0 2px $color, inset 0 0 2px $color;
      color: $color;
      text-shadow: 0 0 2px $color;
    }
  }
}

.light-outline-labels {
  background-color: var(--foreground-1);

  @for $index from 1 through 10 {
    span:nth-child(#{$index}) {
      $color: var(--light-accent-#{$index});
      border: 2px solid $color;
      box-shadow: 0 0 2px $color, inset 0 0 2px $color;
      color: $color;
      text-shadow: 0 0 2px $color;
    }
  }
}

.color {
  font-family: Hasklig, monospace;
  font-weight: bold;
}

.dark-rainbow,
.light-rainbow {
  padding: 16px;
  text-align: center;

  p {
    padding: 16px 0;
  }
}

.dark-rainbow p {
  background: linear-gradient(to right, var(--dark-accent-1), var(--dark-accent-2), var(--dark-accent-3), var(--dark-accent-4), var(--dark-accent-5), var(--dark-accent-6), var(--dark-accent-7), var(--dark-accent-8), var(--dark-accent-9), var(--dark-accent-10));
  color: var(--background-1);
}

.light-rainbow p {
  background: linear-gradient(to right, var(--light-accent-1), var(--light-accent-2), var(--light-accent-3), var(--light-accent-4), var(--light-accent-5), var(--light-accent-6), var(--light-accent-7), var(--light-accent-8), var(--light-accent-9), var(--light-accent-10));
  color: var(--foreground-1);
}

#variants {
  h2 {
    padding: 16px;
  }
}

#dark,
#light {
  padding: 16px;

  h3 {
    margin-bottom: 16px;
  }

  p {
    display: flex;
    margin-bottom: 2px;
    padding: 8px;

    &:last-child {
      margin-bottom: 0;
    }

    .color {
      margin-left: auto;
    }
  }
}

#dark {
  border: 2px solid var(--foreground-1);

  .foreground-primary {
    background-color: var(--foreground-1);
    color: var(--background-1);
  }

  .foreground-secondary {
    background-color: var(--foreground-2);
    color: var(--background-1);
  }

  .background-primary {
    background-color: var(--background-1);
    color: var(--foreground-1);
  }

  .background-secondary {
    background-color: var(--background-2);
    color: var(--foreground-1);
  }

  @for $index from 1 through 10 {
    .accent-#{$index} {
      background-color: var(--dark-accent-#{$index});
      color: var(--background-1);
    }
  }

  @for $index from 1 through 3 {
    .gray-#{$index} {
      background-color: var(--dark-gray-#{$index});
      color: var(--background-1);
    }
  }
}

#light {
  background-color: var(--foreground-1);
  color: var(--background-1);

  .foreground-primary {
    background-color: var(--background-1);
    color: var(--foreground-1);
  }

  .foreground-secondary {
    background-color: var(--background-2);
    color: var(--foreground-1);
  }

  .background-primary {
    background-color: var(--foreground-1);
    color: var(--background-1);
  }

  .background-secondary {
    background-color: var(--foreground-2);
    color: var(--background-1);
  }

  @for $index from 1 through 10 {
    .accent-#{$index} {
      background-color: var(--light-accent-#{$index});
      color: var(--foreground-1);
    }
  }

  @for $index from 1 through 4 {
    .gray-#{$index} {
      background-color: var(--light-gray-#{$index});
      color: var(--foreground-1);
    }
  }
}

footer {
  display: flex;
  flex-direction: column;
  margin-bottom: 32px;

  > div {
    display: flex;
    justify-content: center;

    &:first-of-type {
      align-items: center;
      margin-bottom: 8px;

      a {
        align-items: center;
        color: var(--foreground-1);
        display: flex;
        text-decoration: none;

        &:hover {
          color: var(--foreground-1);
        }
      }

      img {
        height: 29px;
      }
    }
  }
}

#get {
  h2 {
    padding: 16px;
  }

  h3 {
    margin-bottom: 16px;
  }

  > div {
    padding: 16px;
  }
}

#attributions {
  h2 {
    padding: 16px;
  }

  h3 {
    margin-bottom: 8px;
  }

  > div {
    padding: 16px;
  }
}

#liberapay-button {
  display: flex;
  line-height: 0;
}