/* --------------------------------
š” Flex gap fallback using negative margins
š https://codyhouse.co/nuggets/flex-gap-using-negative-margins
-------------------------------- */
.stack {
--gap: 0.5rem; /* š gap control */
display: flex;
flex-wrap: wrap;
margin-bottom: calc(-1 * var(--gap));
margin-left: calc(-1 * var(--gap));
}
.stack--vertical {
flex-direction: column;
}
.stack > * {
margin-bottom: var(--gap);
margin-left: var(--gap);
}
/* demo stuff */
body {
padding: 2rem;
}
section {
margin-bottom: 2rem;
}
p {
margin-bottom: 1rem;
}
.cd-btn {
position: relative;
display: inline-flex;
justify-content: center;
align-items: center;
white-space: nowrap;
text-decoration: none;
padding: 0.5rem 1rem;
border-radius: 0.375em;
font-size: 1em;
text-decoration: none;
line-height: 1.2;
cursor: pointer;
transition: 0.2s;
will-change: transform;
}
.cd-btn:focus-visible {
outline: none;
}
.cd-btn:active {
transform: translateY(2px);
}
.cd-btn--primary {
background: hsl(250, 84%, 54%);
box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, 0.15),
0 1px 3px hsla(250, 84%, 38%, 0.25),
0 2px 6px hsla(250, 84%, 38%, 0.1),
0 6px 10px -2px hsla(250, 84%, 38%, 0.25);
color: hsl(0, 0%, 100%);
}
.cd-btn--primary:hover {
background: hsl(250, 84%, 60%);
box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, 0.15),
0 1px 2px hsla(250, 84%, 38%, 0.25),
0 1px 4px hsla(250, 84%, 38%, 0.1),
0 3px 6px -2px hsla(250, 84%, 38%, 0.25);
}
.cd-btn--primary:focus-visible {
box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, 0.15),
0 1px 2px hsla(250, 84%, 38%, 0.25),
0 1px 4px hsla(250, 84%, 38%, 0.1),
0 3px 6px -2px hsla(250, 84%, 38%, 0.25),
0 0 0 2px hsl(0, 0%, 100%),
0 0 0 4px hsl(250, 84%, 54%);
}