@use "@naomi-2025/ui-core/focus-visible";

button,
[role="button"],
input[type="submit"] {
  background-color: var(--button--bg-color);
  border:
    var(--button--border--width, 0)
    var(--button--border--style, solid)
    var(--button--border--color);
  border-radius: var(--button--border-radius, 0);
  color: var(--button--color);
  cursor: pointer;
  display: var(--button--display, inline-block);
  font-family: var(--button--font-family);
  font-size: var(--button--font-size);
  font-weight: var(--button--font-weight);
  line-height: var(--button--line-height);
  margin: var(--button--margin, 0);
  padding: var(--button--padding, 0);
  text-align: var(--button--text-align);
  text-transform: var(--button--text-transform);
  transition: var(--button--transition, all 200ms ease-in-out);
  width: var(--button--width);

  &:focus-visible {
    @extend %focus-visible;
  }

  &:hover,
  &:focus {
    background-color: var(--button--bg-color--active, var(--button--bg-color));
    color: var(--button--color--active, var(--button--color, currentColor));
  }
}
