@tohuhono/puck-rich-text/src/rich-text-editor/lexical/ui/button/styles.module.css

A puck component for rich text editing made for OberonCMS

.ToolbarButton {
  background: transparent;
  border: none;
  color: var(--puck-color-grey-08);
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 50ms ease-in;
}

.ToolbarButton:focus-visible {
  outline: 2px solid var(--puck-color-azure-05);
  outline-offset: -2px;
}

@media (hover: hover) {
  .ToolbarButton:hover {
    color: var(--puck-color-azure-06);
    cursor: pointer;
  }
}

.ToolbarButton:active {
  color: var(--puck-color-azure-07);
  transition: none;
}