styles.scss

:root {
  --duration: 400ms;
  --success: 12 78 12;
  --included: 159 159 5;
  --not-included: 75 75 75;
  --warning: var(--included);
  --background: 5 5 5;
  --white: 250 250 250;
  --grid-size: 2.5rem;
  --grid-gap: 0.15rem;
  --keyboard-height: 8.5rem;
  --key: 115 115 115;
  --key-width: 1.5rem;
  --key-state-delay: 300ms;
  --border: 80 80 80;
  --border-active: 180 180 180;
}

@media (min-width: 360px) {
  :root {
    --grid-gap: 0.3rem;
    --key-width: 1.7rem;
  }
}

@media (min-width: 450px) {
  :root {
    --grid-gap: 0.4rem;
    --key-width: 2rem;
  }
}

@media (min-width: 600px) {
  :root {
    --key-width: 2.5rem;
  }
}

html,
body {
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  text-align: center;
  background: rgb(var(--background));
  font-size: 16px;
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
}

body {
  padding-bottom: calc(var(--keyboard-height) + 1rem);
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

h1 {
  color: rgb(var(--white));
  padding-top: 1rem;
  padding-bottom: 1rem;
  position: sticky;
  top: 0;
  background: rgb(var(--background));
  z-index: 10;
  font-size: 1.5rem;
}

hr {
  margin: 0.75rem 0;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: auto;
}

.grid {
  display: grid;
  grid-template-columns: repeat(5, var(--grid-size));
  grid-template-rows: auto;
  gap: var(--grid-gap);
  margin-top: var(--grid-gap);

  &-disabled {
    .grid-element {
      pointer-events: none;
    }
  }

  &-element {
    height: var(--grid-size);
    width: var(--grid-size);
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1000px;
    font-family: inherit;
    background-color: rgba(var(--background) / 0);
    border: 1px solid rgb(var(--border));
    border-radius: 0;
    text-transform: uppercase;
    color: rgba(var(--white) / 0.1);
    font-size: 1.2rem;
    font-weight: bold;
    line-height: var(--grid-size);
    letter-spacing: 0;
    box-sizing: border-box;
    transition: color 190ms ease-out 10ms, border-color 190ms ease-out 10ms;

    &-animation-input {
      animation-name: input;
      animation-duration: 200ms;
      animation-iteration-count: 1;
      animation-fill-mode: none;
      border-color: rgb(var(--border-active));
      color: rgba(var(--white) / 1);
    }

    &-animation-check {
      transform-origin: center;
      transform: rotateX(0deg);
      transition: background-color ease-out var(--duration),
        transform ease-out var(--duration);
    }

    &.correct {
      transition: background-color ease-out var(--duration),
        border-color ease-out var(--duration),
        transform ease-out var(--duration);
      background-color: rgba(var(--success) / 1);
      border-color: rgb(var(--success));
      transform: rotateX(360deg);
    }

    &.included {
      transition: background-color ease-out var(--duration),
        border-color ease-out var(--duration),
        transform ease-out var(--duration);
      background-color: rgba(var(--included) / 1);
      border-color: rgb(var(--included));
      transform: rotateX(360deg);
    }

    &.not-included {
      transition: background-color ease-out var(--duration),
        border-color ease-out var(--duration),
        transform ease-out var(--duration);
      background-color: rgba(var(--not-included) / 1);
      border-color: rgb(var(--not-included));
      transform: rotateX(360deg);
    }
  }

  &-example {
    .grid-element-input {
      color: rgb(var(--background));
    }
  }
}

.snack {
  position: fixed;
  bottom: 50%;
  left: 50%;
  padding: 1.5rem 1rem;
  // text-transform: uppercase;
  background: rgba(var(--warning) / 0.9);
  color: white;
  transform: scale(0);
  font-weight: 500;
  line-height: 1.25;
  white-space: nowrap;
  max-width: 75rem;
  min-width: 18rem;
  max-height: 90vh;
  overflow-y: auto;
  z-index: 20;

  &-success {
    white-space: normal;
    background: rgba(var(--success) / 1);
  }

  &-info {
    white-space: normal;
    background: rgba(var(--white) / 1);
    color: rgb(var(--background));
  }

  &-intro {
    white-space: normal;
    background: rgba(var(--background) / 1);
    color: rgb(var(--white));
  }
}

.keyboard {
  position: fixed;
  bottom: var(--grid-gap);
  width: 100%;
  height: var(--keyboard-height);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  background-color: rgb(var(--background));
  // margin: auto;

  &-disabled {
    pointer-events: none;
  }

  &-row {
    display: grid;
    grid-template-columns: repeat(11, auto);
    grid-template-rows: auto;
    gap: var(--grid-gap);
    margin-top: var(--grid-gap);
    padding: 0 var(--grid-gap);
    width: 100%;
    max-width: 500px;
  }

  &-key {
    touch-action: manipulation;
    min-width: var(--key-width);
    height: 2.5rem;
    border-radius: 0.25rem;
    border: 0;
    margin: 0;
    padding: 0;
    box-shadow: none;
    outline: none;
    background-color: rgba(var(--key) / 1);
    text-transform: uppercase;
    font-size: 0.75rem;
    font-weight: 700;
    color: rgb(var(--white));
    transition: background-color 300ms var(--key-state-delay) ease-in-out,
      transform 30ms ease-out, color 300ms var(--key-state-delay) ease-out;
    transform: scale(1);

    @media (pointer: fine) {
      &:hover {
        cursor: pointer;
      }
    }

    &:active {
      transform: scale(1.2);
    }

    &.correct {
      background-color: rgba(var(--success) / 1);
      color: rgb(var(--white));
    }

    &.included {
      background-color: rgba(var(--included) / 1);
    }

    &.not-included {
      background-color: rgba(var(--not-included) / 1);
      color: rgb(var(--white));
    }
  }
}

/* ANIMATIONS */
@keyframes input {
  0% {
    transform: scale(1);
  }
  10% {
    transform: scale(1.01);
  }
  20% {
    transform: scale(1.05);
  }
  30% {
    transform: scale(1.08);
  }
  40% {
    transform: scale(1.12);
  }
  50% {
    transform: scale(1.16);
  }
  75% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes nope {
  0% {
    transform: rotateZ(0);
  }
  15% {
    transform: rotateZ(-12deg);
  }
  20% {
    transform: rotateZ(10deg);
  }
  25% {
    transform: rotateZ(-10deg);
  }
  30% {
    transform: rotateZ(6deg);
  }
  35% {
    transform: rotateZ(-4deg);
  }
  100% {
    transform: rotateZ(0);
  }
}

/* UTILITIES */
.col-span-2 {
  grid-column: span 2;
}

.text-sm {
  font-size: 0.85rem;
}

.text-left {
  text-align: left !important;
}

.mt-0 {
  margin-top: 0;
}