@mixin button($background, $highlight) {

display: inline-block;
padding: 10px 25px;
border-radius: 5px;
transition: all .25s ease;
justify-content: center;
text-align: center;
border: 2px solid $background;
background-color: $background;
color: $highlight;
font-weight: bold;
font-size: 1rem;
&:hover, &:focus {
    background-color: $highlight;
    color: $background;
}

}

.button-dark {

@include button(white, $sidebar-colour)

}

.button-dark-primary {

@include button($primary-highlight, $sidebar-colour)

}

.button-dark-secondary {

@include button($secondary-highlight, $sidebar-colour)

}

.button-dark-tertiary {

@include button($tertiary-highlight, $sidebar-colour)

}

.button-light {

@include button($sidebar-colour, white)

}

.button-light-primary {

@include button($primary-highlight, white)

}

.button-light-secondary {

@include button($secondary-highlight, white)

}

.button-light-tertiary {

@include button($tertiary-highlight, white)

}