@use "./colors";

%a {
  color: var(--a--color);
  background-color: var(--a--bg-color);
  cursor: pointer;
  display: var(--a--display, inline-block);
  font-family: var(--a--font-family);
  font-size: var(--a--font-size);
  font-weight: var(--a--font-weight);
  letter-spacing: var(--a--letter-spacing);
  line-height: var(--a--line-height);
  margin: var(--a--margin, 0);
  outline:
    var(--a--outline--width, 0)
    dashed
    var(--a--outline--color, currentColor);
  outline-offset: 4px;
  padding: var(--a--padding, 0);
  pointer-events: var(--a--pointer-events, all);
  position: var(--a--position, relative);
  text-decoration-line: var(--a--text-decoration-line, none);
  text-decoration-thickness: var(--a--text-decoration-thickness, 1px);
  text-underline-offset: var(--a--text-underline-offset, 0.25em);
  text-transform: var(--a--text-transform);
  transition: var(--a--transition, all 200ms ease-in-out);
  width: var(--a--width);

  &:focus-visible {
    --a--outline--width: 4px;
  }

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