.yun-icon-btn {
  background-color: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  transition: background-color var(--va-transition-duration);

  div {
    font-size: 1.2rem;
  }

  &:hover {
    background-color: rgb(var(--va-c-primary-rgb), 0.08);
  }

  &:active {
    background-color: rgb(var(--va-c-primary-rgb), 0.16);
  }
}

.yun-icon-btn:focus-visible,
.yun-nav-menu a:focus-visible,
.yun-main .markdown-body a:focus-visible {
  outline: 2px solid var(--yun-focus-color);
  outline-offset: 3px;
}

// Opening and closing search occupy the same navigation button slot.
.yun-search-action {
  border-radius: 0;
  color: var(--va-c-text);

  > div {
    opacity: 0.8;
  }

  &:hover > div {
    opacity: 1;
  }
}