@import '~@digi/core/dist/collection/components/_button/button/button.css';
@import 'variables/colors';
@import 'variables/gutters';
@import 'functions/rem';

@mixin msfa__button($type: 'primary') {
  padding: var(--digi-button--padding);
  border-radius: var(--digi-button--border-radius);
  transition: all 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: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-align: var(--digi-button--text-align);
  border: var(--digi-button--border);
  outline: var(--digi-button--outline);
  border-color: var(--digi-button--border-color);

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

  &--primary {
    background-color: var(--digi-button--background);
    color: var(--digi-button--color);

    &:hover,
    &:focus {
      background-color: var(--digi-button--background--hover);
      color: var(--digi-button--color--hover);
    }
  }
  &--secondary {
    background-color: var(--digi-button--background--secondary);
    color: var(--digi-button--color--secondary);

    &:hover,
    &:focus {
      background-color: var(--digi-button--background--secondary--hover);
      color: var(--digi-button--color--secondary);
      border-color: var(--digi-button--border-color);
    }
  }
  &--tertiary {
    background-color: transparent;
    color: var(--digi-button--color--tertiary);
    border-width: 0;

    &:hover,
    &:focus {
      color: var(--digi-button--color--tertiary--hover);
    }
  }

  &--s {
    padding: var(--digi-button--padding--s);
    font-size: var(--digi-button--font-size--s);
  }
  &--l {
    padding: var(--digi-button--padding--l);
    font-size: var(--digi-button--font-size--l);
  }
}

@mixin ui__rounded-button() {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  border-radius: 2rem;
  gap: 1rem;
  font-weight: var(--digi-button--font-weight);
  font-size: var(--digi-button--font-size);
  padding: rem(12) rem(16);
  transition: all 0.2s;
  border: rem(2) solid var(--digi-button--border-color);
  outline: var(--digi-button--outline);

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

  &--rounded-primary {
    background-color: var(--digi-button--background);
    color: var(--digi-button--color);

    &:hover,
    &:focus {
      background-color: var(--digi-button--background--hover);
      color: var(--digi-button--color--hover);
    }
  }
  &--rounded-secondary {
    background-color: var(--digi-button--background--secondary);
    color: var(--digi-button--color--secondary);

    &:hover,
    &:focus {
      background-color: var(--digi-button--background--secondary--hover);
      color: var(--digi-button--color--secondary);
      border-color: var(--digi-button--border-color);
    }
  }
  &--rounded-primary-alt {
    background-color: $digi--color--profile--secondary;
    color: $digi--color--profile;
    border-color: $digi--color--profile--secondary;

    &:hover,
    &:focus {
      background-color: $digi--color--profile--secondary--light;
      border-color: $digi--color--profile--secondary--light;
    }
  }

  &--rounded-secondary-alt {
    background-color: transparent;
    color: $digi--color--profile--secondary;
    border-color: $digi--color--profile--secondary;

    &:hover,
    &:focus {
      color: $digi--color--profile;
      border-color: $digi--color--profile--secondary--light;
      background-color: $digi--color--profile--secondary--light;
    }
  }

  &--s {
    padding: rem(10) rem(14);
    font-size: var(--digi-button--font-size--s);
  }

  &--l {
    padding: rem(16) rem(20);
  }
}
