@import url("./text-toggle.css");

button:not([data-dialog-button]),
.button {
  appearance: none;
  border: 2px solid var(--section-color, var(--accent-color));
  border-radius: var(--border-radius-slight);
  padding: var(--spacing-xs) var(--spacing-md);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-md);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: var(--text-color-inverted);
  background-color: var(--section-color, var(--accent-color));
  transition: transform var(--transition-duration-default) var(--transition-ease-in-out);

  @media (prefers-reduced-motion) {
    transition:
      border-color var(--transition-duration-default) var(--transition-ease-in-out),
      background-color var(--transition-duration-default) var(--transition-ease-in-out);
  }

  &:not(.active):is(:hover, :active, :focus, :focus-within) {
    transform: translateY(var(--button-offset-hover));

    @media (prefers-reduced-motion) {
      transform: none;
      border-color: var(--accent-color-hover);
      background-color: var(--accent-color-hover);
    }
  }

  &.active {
    background: transparent;
    color: var(--accent-color);
  }
}