@font-face {
  font-family: 'Digital Dismay';
  src: url('assets/DigitalDismay-VAKw.ttf');
}

:root {
  --animation-blink: blink 0.6s infinite alternate;
  --font-family: ff-providence-sans-web-pro, -apple-system, BlinkMacSystemFont,
    'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
    'Droid Sans', 'Helvetica Neue', sans-serif;
}

body,
button {
  font-family: var(--font-family);
}

p {
  margin: 0;
}

a {
  color: currentcolor;
}

.Watch {
  &__container {
    --rows_x-small: auto 132px 275px auto auto;
    --min-height_x-small: initial;
    --row-gap_x-small: 24px;

    --columns_small: 100%;
    --rows_small: auto 132px 419px auto auto;
    --areas_small: 'project-info' 'beep' 'face-and-buttons' 'battery-button'
      'state-info' 'fig-31';

    --min-height_default: 100vh;
    --columns_default: 430px min(72px, 3vw) 1fr;
    --rows_default: auto 132px auto auto 1fr auto auto;
    --areas_default: 'project-info project-info project-info project-info'
      'state-info . beep .' 'state-info . face-and-buttons .'
      'state-info . battery-button .' 'state-info . . . '
      'fig-31 fig-31 fig-31 fig-31';
    --row-gap_default: 24px;

    --rows_large: 132px auto auto 1fr auto auto;
    --columns_large: 0.7fr 430px min(72px, 3vw) max-content 1fr;
    --areas_large: '. state-info . beep .' '. state-info . face-and-buttons .'
      '. state-info . battery-button .' '. state-info . . . '
      'fig-31 fig-31 fig-31 fig-31 fig-31';

    box-sizing: border-box;
    min-height: var(--min-height_default);
    padding: 32px;
    display: grid;

    grid-template-columns: var(--columns_default);
    grid-template-rows: var(--rows_default);
    grid-template-areas: var(--areas_default);
    row-gap: var(--row-gap_default);
    place-content: center;
  }

  &__project-info {
    grid-area: project-info;

    display: grid;
    gap: 24px;
    justify-items: center;
  }

  &__piggy-and-text {
    display: grid;
    justify-items: center;
  }

  &__description {
    width: unquote('min(90vw, 400px)');
    text-align: center;
    line-height: 1.4375;
    display: grid;
    gap: 16px;
  }

  &__state-info {
    grid-area: state-info;
    align-self: center;

    display: grid;
    grid-auto-rows: max-content;
    gap: 24px;

    &-section {
      box-sizing: border-box;
      height: 390px;
      display: grid;
      grid-auto-rows: max-content;
      gap: 16px;
      padding: unquote('min(5vw, 32px)');
      border-radius: 24px;
      background-color: hsla(0, 0%, 0%, 0.03);
    }

    &-heading {
      margin: 0;
      font-size: 18px;
      font-family: var(--font-family);
      color: black;
    }

    &-context,
    &-states {
      white-space: pre-wrap;
      font-family: 'Courier New', Courier, monospace;
      font-size: 12px;
      font-weight: 700;
      color: hsl(0, 0%, 40%);
    }
    &-context {
      display: grid;
      grid:
        'T         T1        T2' max-content
        'stopwatch stopwatch stopwatch' max-content
        'rest rest rest' max-content
        / 1fr 1fr 1fr;
      gap: 16px;

      &-T,
      &-T1,
      &-T2,
      &-stopwatch,
      &-rest {
        &::first-line {
          color: black;
        }
      }

      &-T {
        grid-area: T;
      }

      &-T1 {
        grid-area: T1;
      }

      &-T2 {
        grid-area: T2;
      }

      &-stopwatch {
        grid-area: stopwatch;
      }

      &-rest {
        grid-area: rest;
      }
    }
  }

  &__beep-container {
    grid-area: beep;
    display: grid;
    grid-template-areas: 'the-one-area';
    place-content: center;
    place-items: center;
    opacity: 0;

    &[data-state-beep='beeping'] {
      opacity: 1;
      --animation-details: 0.5s infinite alternate;
      --beep-text-animation: beep-text-zoom var(--animation-details);
      --beep-lines-animation: beep-lines-fade var(--animation-details);
    }
  }

  &__beep-text,
  &__beep-lines {
    grid-area: the-one-area;
  }

  &__beep-text {
    animation: var(--beep-text-animation);
  }

  &__beep-lines {
    animation: var(--beep-lines-animation);
  }

  &__face-and-buttons {
    grid-area: face-and-buttons;
    display: grid;
    place-content: center;
    grid-template-columns:
      [a-button-start]
      73px
      [face-start]
      361px
      [a-button-end
      b-button-start d-button-start]
      15px
      [c-button-start]
      85px
      [face-end b-button-end c-button-end d-button-end];
    grid-template-rows:
      [face-start]
      54px
      [a-button-start b-button-start]
      110px
      [c-button-start
      a-button-end b-button-end]
      123px
      [c-button-end
      d-button-start]
      132px
      [face-end d-button-end];
  }

  &__button-a,
  &__button-b,
  &__button-c,
  &__button-d {
    width: 85px;
    height: 85px;
    border: none;
    border-radius: 42.5px;
    background-color: transparent;

    display: flex;
    justify-content: center;

    font-size: 51px;
    line-height: 92px;

    cursor: pointer;
    --user-select: none;
    -webkit-user-select: var(--user-select);
    -ms-user-select: var(--user-select);
    user-select: var(--user-select);

    &:hover {
      background-color: hsla(240, 3%, 70%, 0.1);
    }

    &:active {
      background-color: hsla(240, 3%, 70%, 0.12);
    }
  }

  &__button-a {
    grid-column: a-button-start / a-button-end;
    grid-row: a-button-start / a-button-end;
  }

  &__button-b {
    grid-column: b-button-start / b-button-end;
    grid-row: b-button-start / b-button-end;
  }

  &__button-c {
    grid-column: c-button-start / c-button-end;
    grid-row: c-button-start / c-button-end;
  }

  &__button-d {
    grid-column: d-button-start / d-button-end;
    grid-row: d-button-start / d-button-end;
  }

  &__face {
    grid-column: face-start / face-end;
    grid-row: face-start / face-end;
    display: grid;
    grid-template-columns: [start] 83.01px [display-start] 206px [display-end] 96.99px [end];
    grid-template-rows: [start] 170.61px [display-start] 96px [display-end] 152.39px [end];
  }

  &__face-background {
    &[data-state-light='on'] {
      & #status-icons {
        fill: #c0bdb5;
      }

      & #lcd {
        fill: #dadad2;
      }
    }
  }

  &__displays {
    grid-column: display-start / display-end;
    grid-row: display-start / display-end;

    display: grid;
    grid-template-columns:
      [lcd-start]
      16px
      [alarm1-start] 41px [alarm1-end]
      11px
      [alarm2-start] 40px [alarm2-end]
      12px
      [chime-start] 28px [chime-end]
      11px
      [stopwatch-start] 41px [stopwatch-end]
      6px
      [lcd-end];
    grid-template-rows: 3px [icons-start] 30px [icons-end] 3px [lcd-start] 60px [lcd-end];
    align-items: center;
  }

  &__alarm1-icon,
  &__alarm2-icon,
  &__chime-icon,
  &__stopwatch-icon {
    grid-row: icons-start / icons-end;

    &[data-state='blinking'] {
      animation: var(--animation-blink);
    }
  }

  &__alarm1-icon {
    grid-column: alarm1-start / alarm1-end;
  }

  &__alarm2-icon {
    grid-column: alarm2-start / alarm2-end;
  }

  &__chime-icon {
    grid-column: chime-start / chime-end;
  }

  &__stopwatch-icon {
    grid-column: stopwatch-start / stopwatch-end;
  }

  &__display {
    grid-column: lcd-start / lcd-end;
    grid-row: lcd-start / lcd-end;

    display: grid;
    grid-template-columns:
      3px
      [weak-battery-start] 6px [weak-battery-end
      digits1-start] 63px [digits1-end
      prime-start colon-start period-start] 13px [prime-end colon-end period-end
      digits2-start] 63px [digits2-end
      double-prime-start] 5px [double-prime-end
      am-start pm-start digits3-start] 46px [am-end pm-end]
      7px [digits3-end];
    grid-template-rows:
      5px
      [primes-start] 4px
      [digits1-start digits2-start am-start pm-start weak-battery-start] 13px [primes-end am-end pm-end weak-battery-end
      colon-start period-start digits3-start] 32px [colon-end period-end digits1-end digits2-end digits3-end]
      6px;
  }

  &__weak-battery-icon {
    grid-column: weak-battery-start / weak-battery-end;
    grid-row: weak-battery-start / weak-battery-end;
    animation: var(--animation-blink);
  }

  &__colon-icon {
    grid-column: colon-start / colon-end;
    grid-row: colon-start / colon-end;
  }

  &__period-icon {
    grid-column: period-start / period-end;
    grid-row: period-start / period-end;
    align-self: end;
  }

  &__prime-icon {
    grid-column: prime-start / prime-end;
    grid-row: primes-start / primes-end;
  }

  &__double-prime-icon {
    grid-column: double-prime-start / double-prime-end;
    grid-row: primes-start / primes-end;
  }

  &__am-icon {
    grid-column: am-start / am-end;
    grid-row: am-start / am-end;
  }

  &__pm-icon {
    grid-column: pm-start / pm-end;
    grid-row: pm-start / pm-end;
    justify-self: end;
  }

  &__digits1,
  &__digits2,
  &__digits3 {
    color: #2c2e30;
    font-family: 'Digital Dismay', sans-serif;
    line-height: 0.64;
    letter-spacing: 2.94px;
    align-self: end;
    text-align: right;
  }

  &__digits1,
  &__digits2 {
    font-size: 66px;
  }

  &__digits1 {
    grid-column: digits1-start / digits1-end;
    grid-row: digits1-start / digits1-end;
  }

  &__digits2 {
    grid-column: digits2-start / digits2-end;
    grid-row: digits2-start / digits2-end;
  }

  &__digits3 {
    padding-right: 3px;
    font-size: 42px;
    grid-column: digits3-start / digits3-end;
    grid-row: digits3-start / digits3-end;
    justify-self: end;
  }

  &_blinking {
    animation: var(--animation-blink);
  }

  &__battery-button-container {
    grid-area: battery-button;

    display: flex;
    justify-content: center;

    --user-select: none;
    -webkit-user-select: var(--user-select);
    -ms-user-select: var(--user-select);
    user-select: var(--user-select);
  }

  &__battery-button {
    height: 48px;
    border: none;
    background-color: transparent;
    font-size: 24px;
    cursor: pointer;
  }

  &__figure-31 {
    width: 100%;
    grid-area: fig-31;
  }

  &__happy-piggy {
    width: 128px;
  }
}

@keyframes blink {
  0%,
  45.8333333% {
    opacity: 0;
  }

  54.1666666% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }
}

@keyframes beep-text-zoom {
  0% {
    transform: scale(0.8) rotate(-1deg);
  }

  60%,
  100% {
    transform: scale(1) rotate(1deg);
  }
}

@keyframes beep-lines-fade {
  0%,
  20% {
    opacity: 0;
    transform: scale(0.95);
  }

  29%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@media screen and (min-width: 90em) {
  .Watch {
    &__container {
      grid-template-rows: var(--rows_large);
      grid-template-columns: var(--columns_large);
      grid-template-areas: var(--areas_large);
    }

    &__project-info {
      width: 160px;
      align-self: start;
      justify-self: end;
      grid-column: -3 / -1;
      grid-row: 1 / span 3;
      justify-items: end;
    }

    &__description {
      width: unset;
      text-align: right;
    }
  }
}

@media screen and (max-width: 63em) {
  .Watch {
    &__container {
      grid-template-columns: var(--columns_small);
      grid-template-rows: var(--rows_small);
      grid-template-areas: var(--areas_small);
    }
  }
}

@media screen and (max-width: 32em) {
  .Watch {
    &__container {
      grid-template-rows: var(--rows_x-small);
      min-height: var(--min-height_x-small);
      row-gap: var(--row-gap_x-small);
      padding: 16px;
    }

    &__face-and-buttons {
      transform: scale(0.65);
    }
  }
}
