// stylelint-disable custom-property-pattern, csstools/value-no-unknown-custom-properties
// 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(--wp--preset--color--black);
  border: 1px solid var(--wp--preset--color--black);
  border-radius: 0;
  color: var(--wp--preset--color--white);
  cursor: pointer;
  display: inline-block;
  font-family: var(--wp--preset--font-family--main);
  font-size: var(--wp--preset--font-size--16);
  font-weight: var(--wp--custom--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(--wp--preset--color--white);
    border-color: var(--wp--preset--color--black);
    color: var(--wp--preset--color--black);
  }
}