.btn {
  position: relative;   /* ensure children have established stacking context */
  z-index: 0;           /* content above overlay */

  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin: 0;
  padding: 0;

  background-color: var(--panel-color);

  border-width: 1px;
  border-style: solid;
  border-color: var(--border-color);
  border-radius: 4px;

  color: inherit;

  transition:
    background-color var(--theme-transition),
    border-color var(--theme-transition);

  cursor: pointer;
  user-select: none;              /* prevent text selection on click */
}

.btn:focus-visible{
  outline: 2px solid var(--glyph-color);
  outline-offset: 2px;
}

/* Hover effect using ::after pseudo-element */
.btn::after{
  content: "";                    /* overlay for hover effect */

  position: absolute;
  inset: 0;                       /* cover the entire button */
  z-index: -1;

  background-color: var(--link-hover);
  border-radius: inherit;

  opacity: 0;                     /* start invisible */
  transition: 
    background-color var(--theme-transition),
    opacity var(--hover-transition);

  pointer-events: none;           /* allow clicks to pass through to button */  
}

.btn:hover::after{
  opacity: 1;
}

.btn.is-active::after{
  opacity: 1;
}

@media (hover: none){
  .btn:hover::after{ opacity: 0; }
}

/* Elements buttons */
a.btn{
  display:inline-flex;
  text-decoration:none;
  color:inherit;
}

/* Specific button styles */
.btn--topbar {
  height: var(--bar-button-height);
  width: var(--bar-button-height);

  font-size: 2rem;
  white-space: nowrap;          /* prevent line break on small screens */
}

.btn--menu {
  padding: 4px 8px;

  border: 1px solid var(--border-color);
  border-radius: 4px;

  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.4px;
  white-space: nowrap;

  transition:
    background-color var(--theme-transition),
    border-color var(--theme-transition);
}