/*-------------
      Focus
---------------*/

.button.focused,
.button:focus {
  background-color: var(--button-focus-background-color);
  background-image: var(--button-focus-background-image);
  color: var(--button-focus-color);
  box-shadow: var(--button-focus-box-shadow);
}

.button.focused .icon,
.button:focus .icon {
  opacity: var(--button-focus-icon-opacity);
}


/* This only shows with keyboard navigation */
.button:focus-visible {
  box-shadow: var(--button-focus-box-shadow), var(--focused-ring-shadow) !important;
}