Website/styles/globals.scss

@import 'variables.module';
@import 'fonts.module';
@import 'global.module';

* {
  padding: 0;
  margin: 0;

  box-sizing: border-box;

  scrollbar-color: $colorPrimary $colorSurfaceLight1;

  @media (prefers-color-scheme: dark) {
    scrollbar-color: $colorPrimary $colorSurfaceDark1;
  }
}

*::selection {
  background: rgba($colorPrimary, 0.75);

  @media (prefers-color-scheme: dark) {
    background: rgba($colorPrimary, 0.65);
  }
}

body {
  background: $colorSurfaceLight1;
  color: $colorTextLight1;

  overflow-x: hidden;

  @media (prefers-color-scheme: dark) {
    background: $colorSurfaceDark1;
    color: $colorTextDark1;
  }
}

#__next {
  display: flex;
  flex-direction: column;

  min-height: 100svh;
}

main {
  padding: 1.5rem 0;

  flex: 1 1;
}

a {
  color: $colorPrimary;

  text-decoration: none;

  cursor: pointer;

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

button {
  cursor: pointer;
}

ol, ul {
  list-style-position: inside;

  margin-left: 1rem;
}

pre {
  overflow-x: scroll;

  max-width: 100%;

  display: block;

  padding: 1rem;

  background: $colorSurfaceLight2;

  border: 1px solid $colorBorderLight1;
  border-radius: .5rem;

  @media (prefers-color-scheme: dark) {
    background: $colorSurfaceDark2;
    border-color: $colorBorderDark1;
  }
}

iframe {
  background: $colorSurfaceLight2;

  border: 1px solid $colorBorderLight1;
  border-radius: 1rem;

  @media (prefers-color-scheme: dark) {
    background: $colorSurfaceDark2;

    border-color: $colorBorderDark1;
  }
}

hr {
  border: none;

  height: 1px;

  background: $colorBorderLight1;

  margin: 1rem 0;

  @media (prefers-color-scheme: dark) {
    background: $colorBorderDark1;
  }
}

// inputs

input {
  &[type='checkbox'] {
    appearance: none;

    width: 52px;
    height: 2rem;

    background: $colorSurfaceLight2;

    border: 1px solid $colorBorderLight1;
    border-radius: 1rem;

    position: relative;

    cursor: pointer;

    transition: 150ms;

    &::before {
      content: "";

      position: absolute;

      height: 1rem;
      width: 1rem;

      border-radius: 50%;

      background: $colorPrimary;

      top: 50%;
      left: .5rem;

      transform: translateY(-50%);

      transition: 150ms;
    }

    &:checked {
      background: $colorPrimary;

      &::before {
        background: $colorSurfaceLight2;

        transform: translate(20px, -50%);

        animation: thumbAnimation 150ms;
      }
    }

    @media (prefers-color-scheme: dark) {
      background: $colorSurfaceDark2;

      border-color: $colorBorderDark1;

      &::before {
        background: $colorPrimary;
      }

      &:checked {
        background: $colorPrimary;

        &::before {
          background: $colorSurfaceDark2;

          transform: translate(20px, -50%);

          animation: thumbAnimation 150ms;
        }
      }
    }
  }
}

select {
  appearance: none;

  padding: .5rem 1rem;

  background: $colorSurfaceLight2;
  color: $colorTextLight1;

  border: 1px solid $colorBorderLight1;
  border-radius: .5rem;

  cursor: pointer;

  transition: 150ms;

  &:hover {
    border-color: $colorPrimary;
  }

  &:focus {
    outline: none;

    border-color: $colorPrimary;
  }

  @media (prefers-color-scheme: dark) {
    background: $colorSurfaceDark2;
    color: $colorTextDark1;

    border-color: $colorBorderDark1;
  }
}

@keyframes thumbAnimation {
  from {
    transform: translateY(-50%);
  }

  to {
    transform: translate(20px, -50%);
  }
}