/* 
    @property --m{} 定义自定义属性的语法
    syntax: <type>; // 定义属性的类型 - 类型有 color image url decoration
    syntax: <type> <unit>; // 定义属性的类型和单位
    inherits: false; // 是否可以被继承属性
    initial-value: 0; // 属性的默认值为0
 */
@property --m {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}

@property --s {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}

@property --ms {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}

html,
body {
  margin: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 15px;
  background: aliceblue;
}

.counter {
  display: grid;
  gap: 10px;
  grid-template-areas:
    "clock clock"
    "start reset";
}

.clock {
  grid-area: clock;
  text-align: center;
  font-size: 60px;
  padding: 0.2em 0.5em;
  border: 5px solid rgba(255, 255, 255, 0.3);
  border-radius: 10px;
  font-family: monospace;
  background: #3a3a3a;
  color: #fff;
  /* counter-reset 用于重置计数器 
        minute=属性名 var(--m)=属性值
     */
  counter-reset: minute var(--m) seconds var(--s) ms var(--ms);
  animation: ms 1s infinite steps(100, end), seconds 60s infinite steps(60, end),
    minute 3600s infinite steps(60, end);
  /* animation-play-state: paused; 暂停动画 */
  animation-play-state: paused;
}

@keyframes ms {
  to {
    --ms: 99;
  }
}

@keyframes seconds {
  to {
    --s: 59;
  }
}

@keyframes minute {
  to {
    --m: 59;
  }
}

.clock::before {
  /* counter() 用于获取计数器的值 minute=属性名 var(--m)=属性值 */
  content: counter(minute, decimal-leading-zero) ":"
    counter(seconds, decimal-leading-zero) ":" counter(ms, decimal-leading-zero);
  text-shadow: 3px 3px 3px black;
}

.btn {
  grid-area: start;
  text-align: center;
  padding: 0.5em;
  font-size: 24px;
  background-color: chocolate;
  color: #fff;
  user-select: none;
  cursor: pointer;
  transition: 0.2s;
}

.btn:hover {
  filter: brightness(1.1);
}

.reset {
  grid-area: reset;
  background-color: #f44336;
}

.start::after {
  content: "开始";
}

/* start类元素 与 clock类元素 是相连的关系, 
    所以点击了start类元素, 就会触发clock类元素的checked选择器
 */
:checked ~ .clock {
  animation-play-state: running;
}

:checked ~ .start::after {
  content: "暂停";
}

/* checked为true时, reset类元素的样式修改且不能点击 */
:checked ~ .reset {
  /* pointer-events: none; 禁止元素的点击事件 */
  pointer-events: none;
  filter: brightness(0.5);
}

/* reset类元素点击后 使.clock类元素的动画停止 */
.reset:active ~ .clock {
  animation: none;
}