.btn-primary {
  border: none !important;
  background-color: $primary !important;
  color: $white;

  &:hover,&:focus {
    background-color: $primary-focus !important;
  }
}

.btn {
  @include text-xxs;
  border-radius: 0.5rem;
  padding: 0.5rem 2rem 0.5rem 1rem;
  position: relative;

  &::after {
    content: "";
    background-image: url('graphics/chevron.svg');
    background-repeat: no-repeat;
    height: 30px;
    position: absolute;
    right: -8px;
    top: 10px;
    width: 30px;
  }
}

.btn.btn-outline-dark::after {
  background-image: url('graphics/chevron-inverse.svg');
}