<h1>
  Native outline style demo
</h1>

<main>
  <button>Button</button>
  <button>Button</button>
  <button>Button</button>
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
</main>

:focus
  outline-style: auto
  outline-offset: 5px
  outline-color: var(--highlight-color)
  outline-width: initial

/* --- */
:root
  --highlight-color: #214963

body
  margin: 0
  background: #ea6c6e
  min-height: 100vh
  display: flex
  gap: 40px
  align-items: center
  justify-content: center
  flex-direction: column
  font-family: sans-serif
  flex-wrap: wrap
  color: white

main
  display: flex
  gap: 20px
  align-items: center

h1
  margin: 0

button
  font: inherit
  background: white
  border: none
  padding: 0 12px
  line-height: 30px
  border-radius: 99px

  &:hover
    background: var(--highlight-color)
    color: white
    cursor: pointer

a
  color: inherit

  &:hover
    color: var(--highlight-color)