@import '~@digi/core/dist/collection/components/_button/button/button.css';

@mixin msfa__button($type: 'primary') {
  padding: var(--digi-button--padding);
  border-radius: var(--digi-button--border-radius);
  transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
  text-decoration: none;
  font-weight: var(--digi-button--font-weight);
  font-size: var(--digi-button--font-size);
  width: var(--digi-button--width);
  display: flex;
  align-items: center;
  gap: 0.3rem;
  text-align: var(--digi-button--text-align);
  border: var(--digi-button--border);
  outline: var(--digi-button--outline);
  border-color: var(--digi-button--border-color);

  @if $type == 'secondary' {
    background-color: var(--digi-button--background--secondary);
    color: var(--digi-button--color--secondary);
  } @else if $type == 'tertiary' {
    background-color: transparent;
    color: var(--digi-button--color--tertiary);
    border-width: 0;
  } @else {
    background-color: var(--digi-button--background);
    color: var(--digi-button--color);
  }

  &:hover,
  &:focus {
    outline: var(--digi-button--outline--focus);
    border-color: var(--digi-button--border-color--hover);

    @if $type == 'secondary' {
      background-color: var(--digi-button--background--secondary--hover);
      color: var(--digi-button--color--secondary--hover);
    } @else if $type == 'tertiary' {
      color: var(--digi-button--color--tertiary--hover);
    } @else {
      background-color: var(--digi-button--background--hover);
      color: var(--digi-button--color--hover);
    }
  }
}
