.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;

  // The chevron is drawn as a masked element so its colour is controlled by
  // a single `color` (or `--btn-chevron-color`) declaration, rather than by
  // swapping out the SVG file.
  &::after {
    content: "";
    background-color: var(--btn-chevron-color, currentColor);
    -webkit-mask: url('graphics/chevron.svg') no-repeat 0 0;
    mask: url('graphics/chevron.svg') no-repeat 0 0;
    height: 30px;
    position: absolute;
    right: -8px;
    top: 10px;
    width: 30px;
  }
}

.btn.btn-outline-dark::after {
  background-color: var(--btn-chevron-color, #000);
}