.button-white {
  color: var(--button-white-color);
  background: var(--white);
  border-color: var(--white);

  &.button-border {
    color: var(--white);
    background: transparent;
  }

  &:hover,
  &:focus {
    color: var(--button-white-color);
    background: var(--white-hover);
    border-color: var(--white-hover);
  }

  &:active {
    color: var(--button-white-color);
    background: var(--white-active);
    border-color: var(--white-active);
  }

  &.button-text {
    color: var(--white);

    &:hover,
    &:focus {
      color: var(--white-hover);
    }

    &:active {
      color: var(--white-active);
    }
  }
}

.button-light {
  color: var(--button-light-color);
  background: var(--light);
  border-color: var(--light);

  &.button-border {
    color: var(--light);
    background: transparent;
  }

  &:hover,
  &:focus {
    color: var(--button-light-color);
    background: var(--light-hover);
    border-color: var(--light-hover);
  }

  &:active {
    color: var(--button-light-color);
    background: var(--light-active);
    border-color: var(--light-active);
  }

  &.button-text {
    color: var(--light);

    &:hover,
    &:focus {
      color: var(--light-hover);
    }

    &:active {
      color: var(--light-active);
    }
  }
}

.button-grey {
  color: var(--button-grey-color);
  background: var(--grey);
  border-color: var(--grey);

  &.button-border {
    color: var(--grey);
    background: transparent;
  }

  &:hover,
  &:focus {
    color: var(--button-grey-color);
    background: var(--grey-hover);
    border-color: var(--grey-hover);
  }

  &:active {
    color: var(--button-grey-color);
    background: var(--grey-active);
    border-color: var(--grey-active);
  }

  &.button-text {
    color: var(--grey);

    &:hover,
    &:focus {
      color: var(--grey-hover);
    }

    &:active {
      color: var(--grey-active);
    }
  }
}

.button-dark {
  color: var(--button-dark-color);
  background: var(--dark);
  border-color: var(--dark);

  &.button-border {
    color: var(--dark);
    background: transparent;
  }

  &:hover,
  &:focus {
    color: var(--button-dark-color);
    background: var(--dark-hover);
    border-color: var(--dark-hover);
  }

  &:active {
    color: var(--button-dark-color);
    background: var(--dark-active);
    border-color: var(--dark-active);
  }

  &.button-text {
    color: var(--dark);

    &:hover,
    &:focus {
      color: var(--dark-hover);
    }

    &:active {
      color: var(--dark-active);
    }
  }
}

.button-black {
  color: var(--button-black-color);
  background: var(--black);
  border-color: var(--black);

  &.button-border {
    color: var(--black);
    background: transparent;
  }

  &:hover,
  &:focus {
    color: var(--button-black-color);
    background: var(--black-hover);
    border-color: var(--black-hover);
  }

  &:active {
    color: var(--button-black-color);
    background: var(--black-active);
    border-color: var(--black-active);
  }

  &.button-text {
    color: var(--black);

    &:hover,
    &:focus {
      color: var(--black-hover);
    }

    &:active {
      color: var(--black-active);
    }
  }
}

.button-primary {
  color: var(--button-primary-color);
  background: var(--primary);
  border-color: var(--primary);

  &.button-border {
    color: var(--primary);
    background: transparent;
  }

  &:hover,
  &:focus {
    color: var(--button-primary-color);
    background: var(--primary-hover);
    border-color: var(--primary-hover);
  }

  &:active {
    color: var(--button-primary-color);
    background: var(--primary-active);
    border-color: var(--primary-active);
  }

  &.button-text {
    color: var(--primary);

    &:hover,
    &:focus {
      color: var(--primary-hover);
    }

    &:active {
      color: var(--primary-active);
    }
  }
}

.button-secondary {
  color: var(--button-secondary-color);
  background: var(--secondary);
  border-color: var(--secondary);

  &.button-border {
    color: var(--secondary);
    background: transparent;
  }

  &:hover,
  &:focus {
    color: var(--button-secondary-color);
    background: var(--secondary-hover);
    border-color: var(--secondary-hover);
  }

  &:active {
    color: var(--button-secondary-color);
    background: var(--secondary-active);
    border-color: var(--secondary-active);
  }

  &.button-text {
    color: var(--secondary);

    &:hover,
    &:focus {
      color: var(--secondary-hover);
    }

    &:active {
      color: var(--secondary-active);
    }
  }
}

.button-tertiary {
  color: var(--button-tertiary-color);
  background: var(--tertiary);
  border-color: var(--tertiary);

  &.button-border {
    color: var(--tertiary);
    background: transparent;
  }

  &:hover,
  &:focus {
    color: var(--button-tertiary-color);
    background: var(--tertiary-hover);
    border-color: var(--tertiary-hover);
  }

  &:active {
    color: var(--button-tertiary-color);
    background: var(--tertiary-active);
    border-color: var(--tertiary-active);
  }

  &.button-text {
    color: var(--tertiary);

    &:hover,
    &:focus {
      color: var(--tertiary-hover);
    }

    &:active {
      color: var(--tertiary-active);
    }
  }
}