%button-base {
  display: inline-block;
  position: relative;
  padding: 5px 1rem;
  cursor: pointer;
  height: 2.5rem;

  border: none;
  outline: none;
  transition:
    color 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease;
  text-decoration: none;

  font-weight: 500;
}

@mixin button-filled {
  @extend %button-base;
  background: var(--site-primary);
  border: 2px solid var(--site-primary);
  color: var(--site-on-primary);

  &:hover,
  &:focus {
    background: var(--site-primary-dark);
    border-color: var(--site-primary-dark);
    text-decoration: none;
  }

  &:active {
    background: var(--site-primary-dark);
    border-color: var(--site-primary-dark);
    text-decoration: none;
  }

  &[disabled] {
    background: var(--site-primary-light);
    border-color: var(--site-primary-light);
    opacity: 0.45;

    &:hover,
    &:focus {
      background: var(--site-primary-light);
      border-color: var(--site-primary-light);
    }

    &:active {
      background: var(--site-primary-light);
      border-color: var(--site-primary-light);
    }
  }
}

@mixin button-outline {
  @extend %button-base;

  color: var(--site-secondary);
  border: 2px solid var(--site-secondary);
  background: transparent;

  &:hover,
  &:focus {
    border-color: var(--site-secondary);
    background: var(--site-secondary);
    color: var(--site-on-secondary);
    text-decoration: none;
  }

  &:active {
    border-color: var(--site-secondary);
    background: var(--site-secondary);
    color: var(--site-on-secondary);
    text-decoration: none;
  }

  &[disabled] {
    background: none;
    &:hover,
    &:focus {
      background: none;
    }

    &:active {
      background: none;
    }
  }
}

@mixin button-text {
  @extend %button-base;

  color: var(--site-primary);
  background: none;

  &:hover,
  &:focus {
    background: none;
    color: var(--site-text-color);
  }

  &:active {
    background: none;
    color: var(--site-text-color);
  }

  &[disabled] {
    background: none;

    &:hover,
    &:focus {
      color: var(--site-primary-light);
      background: none;
    }

    &:active {
      color: var(--site-primary-light);
      background: none;
    }
  }
}