@layer components {

.button,
input[type="submit"],
button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--pad-2xs) var(--pad-sm);
  font-weight: var(--bold);
  color: var(--ink);
  background: var(--pop);
  border: 1px var(--line-style) var(--ink);
  border-radius: 0;
  box-shadow: var(--shadow);
  text-decoration: none;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease;
}

:is(.button, input[type="submit"], button[type="submit"]):is(:hover, :focus-visible) {
  transform: translate(2px, 2px);
  box-shadow: var(--shadow-pressed);
  text-decoration: none;
}

}