.btn {
    &.btn-primary,
    &.btn-secondary,
    &.btn-danger {
        color: $hcSecondary;
        border-color: currentColor;
        background-color: $hcPrimary;

        .icon * {
            fill: $hcSecondary;
        }

        &:hover {
            color: currentColor;
            border-color: currentColor;
            background-color: $hcSecondary;

            .icon * {
                fill: $hcPrimary;
            }
        }
    }

    &.btn-link {
        color: $hcPrimary;
    }

    &.btn-outline-primary,
    &.btn-outline-danger {
        color: currentColor;
        border-color: currentColor;

        &:hover {
            color: $hcSecondary;
            background-color: $hcPrimary;
        }
    }

    // btns to change contrast
    &.btn--hc {
        &-1,
        &-4 {
            color: $color-black;
        }
        &-3 {
            color: $color-yellow;
        }
    }

    &--remove {
        color: currentColor;
        border-color: currentColor;
        background-color: $hcSecondary;

        &:hover {
            color: $hcSecondary;
            background-color: $hcPrimary;
        }
    }
}
