/* ----- blue ----- */

.sterling-button.secondary.blue:not(:disabled) {
  background-color: transparent;
  border-color: var(--stsv-button__border-color--blue);
  color: var(--stsv-button__border-color--blue);
}

.sterling-button.secondary.blue:not(:disabled):hover {
  background-color: var(--stsv-button__background-color--blue--hover);
  border-color: var(--stsv-button__border-color--blue--hover);
  color: var(--stsv-button__color--blue--hover);
}

.sterling-button.secondary.blue:not(:disabled):focus-visible {
  background-color: var(--stsv-button__background-color--blue--focus);
  border-color: var(--stsv-button__border-color--blue--focus);
  color: var(--stsv-button__color--blue--focus);
}

.sterling-button.secondary.blue:not(:disabled):active {
  background-color: var(--stsv-button__background-color--blue--active);
  border-color: var(--stsv-button__border-color--blue--active);
  color: var(--stsv-button__color--blue--active);
}

/* ----- green ----- */

.sterling-button.secondary.green:not(:disabled) {
  background-color: transparent;
  border-color: var(--stsv-button__border-color--green);
  color: var(--stsv-button__border-color--green);
}

.sterling-button.secondary.green:not(:disabled):hover {
  background-color: var(--stsv-button__background-color--green--hover);
  border-color: var(--stsv-button__border-color--green--hover);
  color: var(--stsv-button__color--green--hover);
}

.sterling-button.secondary.green:not(:disabled):focus-visible {
  background-color: var(--stsv-button__background-color--green--focus);
  border-color: var(--stsv-button__border-color--green--focus);
  color: var(--stsv-button__color--green--focus);
}

.sterling-button.secondary.green:not(:disabled):active {
  background-color: var(--stsv-button__background-color--green--active);
  border-color: var(--stsv-button__border-color--green--active);
  color: var(--stsv-button__color--green--active);
}

/* ----- orange ----- */

.sterling-button.secondary.orange:not(:disabled) {
  background-color: transparent;
  border-color: var(--stsv-button__border-color--orange);
  color: var(--stsv-button__border-color--orange);
}

.sterling-button.secondary.orange:not(:disabled):hover {
  background-color: var(--stsv-button__background-color--orange--hover);
  border-color: var(--stsv-button__border-color--orange--hover);
  color: var(--stsv-button__color--orange--hover);
}

.sterling-button.secondary.orange:not(:disabled):focus-visible {
  background-color: var(--stsv-button__background-color--orange--focus);
  border-color: var(--stsv-button__border-color--orange--focus);
  color: var(--stsv-button__color--orange--focus);
}

.sterling-button.secondary.orange:not(:disabled):active {
  background-color: var(--stsv-button__background-color--orange--active);
  border-color: var(--stsv-button__border-color--orange--active);
  color: var(--stsv-button__color--orange--active);
}

/* ----- red ----- */

.sterling-button.secondary.red:not(:disabled){
  background-color: transparent;
  border-color: var(--stsv-button__border-color--red);
  color: var(--stsv-button__border-color--red);
}

.sterling-button.secondary.red:not(:disabled):hover {
  background-color: var(--stsv-button__background-color--red--hover);
  border-color: var(--stsv-button__border-color--red--hover);
  color: var(--stsv-button__color--red--hover);
}

.sterling-button.secondary.red:not(:disabled):focus-visible {
  background-color: var(--stsv-button__background-color--red--focus);
  border-color: var(--stsv-button__border-color--red--focus);
  color: var(--stsv-button__color--red--focus);
}

.sterling-button.secondary.red:not(:disabled):active {
  background-color: var(--stsv-button__background-color--red--active);
  border-color: var(--stsv-button__border-color--red--active);
  color: var(--stsv-button__color--red--active);
}