// Important needed to override WordPress editor inline styles
// stylelint-disable number-max-precision, rem-over-px/rem-over-px, declaration-no-important
@use '../helpers' as *;

@mixin button() {
  appearance: none;
  background-color: var(--color-black);
  border: 1px solid var(--color-black);
  border-radius: 0;
  color: var(--color-white);
  cursor: pointer;
  display: inline-block;
  font-family: var(--typography-family-paragraph);
  font-size: var(--typography-size-16);
  font-weight: var(--typography-weight-semibold);
  line-height: 1.39;
  margin-bottom: 0;
  max-width: 230px;
  overflow: hidden;
  padding: 14px 21px;
  position: relative;
  text-decoration: none;
  text-overflow: ellipsis;
  transition: all 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  white-space: nowrap !important; // Override editor inline styles
  width: auto;

  &.focus,
  &:hover,
  &:focus {
    background-color: var(--color-white);
    border-color: var(--color-black);
    color: var(--color-black);
  }
}