.normal-to-bold {
  transition-property: background-color, border-color, fill, box-shadow, color, font-weight;
}

html[data-theme-transitioning] .normal-to-bold {
  transition-property: background-color, border-color, fill, box-shadow;
}

/* Match anonyway's normal-to-bold interaction behavior. */
.normal-to-bold {
  font-size: 14px;
  font-weight: normal !important;
}

.normal-to-bold:active {
  font-weight: bold !important;
}

.focus-accent-border:focus,
.focus-accent-border:focus-visible {
  outline: none;
  border-color: var(--focus-accent-color) !important;
}

@media (hover: hover) and (pointer: fine) {

  .normal-to-bold:hover {
    font-weight: bold !important;
  }
}

.icon-color-accent-button {
  transition-property: background-color, border-color, fill, box-shadow, color, font-weight;
}

html[data-theme-transitioning] .icon-color-accent-button {
  transition-property: background-color, border-color, fill, box-shadow;
}

.icon-color-accent-button:active,
.icon-color-accent-button:focus-visible {
  color: var(--focus-accent-color) !important;
}

@media (hover: hover) and (pointer: fine) {
  .icon-color-accent-button:hover {
    color: var(--focus-accent-color) !important;
  }

  .switch:hover {
    border-color: var(--focus-accent-color);
  }
}

.switch input:focus-visible + .slider {
  outline: 2px solid var(--focus-accent-color);
  outline-offset: 2px;
}