1  /* the props */
 2  @import "open-props/style";
 3  
 4  /* optional imports that use the props */
 5  @import "open-props/normalize";
 6  @import "open-props/buttons";
 7  
 8  /* just light or dark themes */
 9  @import "open-props/normalize/dark";
10  @import "open-props/buttons/dark";
11  @import "open-props/normalize/light";
12  @import "open-props/buttons/light";
13  
14  /* individual imports */
15  @import "open-props/indigo";
16  @import "open-props/easings";
17  @import "open-props/animations";
18  @import "open-props/sizes";
19  @import "open-props/gradients";
20  /* see PropPacks for the full list */
21  
22  html {
23      block-size: 100%;
24  }
25  
26  body {
27      min-block-size: 100%;
28      display: grid;
29      margin: 0;
30  
31      #root {
32          display: grid;
33      }
34  }
35  
36  section {
37      display: grid;
38      grid-row-gap: 5px;
39      place-content: center;
40  
41      background-color: var(--gray-9);
42      background-color: #ebebdf;
43  }
44  
45  button {
46      display: inline-flex;
47      white-space: nowrap;
48  
49      font-size: var(--font-size-fluid-1);
50      font-weight: var(--font-weight-7);
51  
52      padding-inline: var(--size-6);
53      padding-block: var(--size-3);
54  
55      color: var(--blue-9);
56      color: #111111;
57      border: var(--border-size-2) solid var(--blue-5);
58      border: var(--border-size-3) solid #111111;
59      background-color: transparent;
60      border-radius: var(--radius-2);
61      box-shadow: var(--shadow-3);
62  
63      &:is(:hover, :focus) {
64          cursor: pointer;
65          color: var(--blue-0);
66          background-color: var(--blue-5);
67          box-shadow: var(--shadow-5);
68      }
69  }
70  
71  @media
72   (prefers-reduced-motion: no-preference) {
73    .button:focus {
74      transition: outline-offset .25s ease;
75    }
76    .button:focus:not(:active) {
77      outline-offset: 5px;
78    }
79  }