/* https://color.adobe.com/ru/search?q=light%20bulb&t=term */
/* TODO подивитися на різні ф-ції анімації */
/* TODO розібратися з коьлорами і повиносити у змінні */

* {
  box-sizing: border-box;
  margin: 0;
}

:root {
  --bg: #0d0d0d;
  --primary-color: #f2f2f2;
  --secondary-color: hsl(0deg 0% 60%);
  --ease-elastic-4: cubic-bezier(.5, 1.5, .75, 1.25);
}

body {
  padding: 8px;
  background-color: var(--bg);
  color: var(--primary-color);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Oxygen, Cantarell, sans-serif;
}

.container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 512px;
  margin: 0 auto;
}

.description {
  font-size: 1.5rem;
}

/* todo btn-reset */
.sound-toggle {
  cursor: pointer;
  color: var(--secondary-color);
  background: transparent;
  border: none;
  padding: 8px;
  margin-left: auto;
  margin-bottom: 32px;
}

/* https://www.cassie.codes/posts/creating-my-logo-animation/ */
.last-sound-wave {
  stroke-dasharray: 10;
  stroke-dashoffset: -5;
  transition: stroke-dashoffset .3s ease-in;
}

.sound-toggle--on .last-sound-wave {
  stroke-dashoffset: 5;
}

.bits {
  display: flex;
  overflow-y: auto;
  padding-bottom: 8px;
}

.light-bulb-button {
  --size: 4rem;
  --icon-fill: #ffd15c;
  --light-on-stroke: #ffa200;
  --icon-stroke: var(--secondary-color);

  background: none;
  border: none;
  padding: 0;
  color: var(--icon-stroke);

  inline-size: var(--size);

  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;

  outline-offset: 5px;
}

.light-bulb-button > svg {
  inline-size: 100%;
  block-size: 100%;
  
  stroke-linecap: round;
  stroke-linejoin: round;

  transition: transform 0.1s ease-out;
}

.light-bulb-button[aria-pressed="true"] > svg {
  transform: translateY(10px);
}

.light-bulb {
  transition: fill 0.3s ease-out,
              stroke 0.3s ease-out,
              filter 0.3s ease-out,
              stroke-width 0.3s ease-out;
  fill: transparent;
}

.light-bulb-button[aria-pressed="true"] .light-bulb {
  fill: var(--icon-fill);
  filter: drop-shadow(0 0 2px var(--icon-fill));
  stroke-width: 0.3;
  stroke: var(--light-on-stroke);
}

.beams-of-light {
  transition: stroke 0.3s ease-out,
              opacity 0.3s ease-in,
              stroke-width 0.3s ease-out;
  transform-origin: center;
  opacity: 0;
  stroke: var(--light-on-stroke);
  stroke-width: 0;
}

.light-bulb-button[aria-pressed="true"] .beams-of-light {
  stroke: var(--light-on-stroke);
  opacity: 1;
  stroke-width: 0.7;
}

.bit {
  color: var(--primary-color);
  font-size: 4rem;
  font-weight: bold;
  text-align: center;
}

.power-of-two {
  text-align: center;
  font-size: 2rem;
  color: var(--secondary-color);
}

.decimal-result {
  flex: 1;
  width: 100%;
  margin-top: 32px;
  font-size: 2rem;
  text-align: center;
  overflow: auto;
}