src/components/Button.module.css


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

.btn:last-child {
  margin-bottom: 0;
}
.generic-button {
  display: grid;
  place-items: center;
  border: 3px solid #222;
  color: white;
  border-radius: 15px;
  font-size: 1.6em;
  width: 100%;
  transition: transform 0.05s;
  user-select: none;
}
.generic-button:enabled:active {
  transform: scale(0.8);
  box-shadow: inset 0px 0px 5px 0px black;
}
.generic-button:disabled {
  filter: grayscale(0.8);
}
.btn {
  composes: generic-button;
  --page-size-without-margins: (
    100svh - (var(--rows-count) + 1) * var(--btn-gap)
  );
  --btn-height: calc(var(--page-size-without-margins) / var(--rows-count));
  height: var(--btn-height);
}