ontime/apps/client/src/common/components/buttons/BaseButtonStyles.module.scss

.subtle {
  background: $gray-1050;
  color: $blue-400;

  &:hover:not(:disabled):not(:active) {
    background: $gray-1000;
    color: $blue-500;
  }

  &:active:not(:disabled) {
    background: $gray-1100;
    border-color: $gray-1250;
  }
}

.subtle-white {
  background: $gray-1050;
  color: $ui-white;

  &:hover:not(:disabled):not(:active) {
    background: $gray-1000;
    color: $ui-white;
  }

  &:active:not(:disabled) {
    background: $gray-1100;
    border-color: $gray-1250;
  }

  &:disabled {
    background: $gray-1050;
  }
}

.primary {
  background: $blue-700;
  color: $ui-white;

  &:hover:not(:disabled):not(:active) {
    background: $blue-600;
  }

  &:active:not(:disabled) {
    background: $blue-800;
    border-color: $blue-900;
  }

  &:disabled {
    opacity: $viewer-opacity-disabled;
  }
}

.destructive {
  background: $red-700;
  color: $ui-white;

  &:hover:not(:disabled):not(:active) {
    background: $red-600;
    color: $ui-white;
  }

  &:active:not(:disabled) {
    background: $red-800;
    border-color: $red-900;
  }
}

.subtle-destructive {
  background: $gray-1050;
  color: $red-400;

  &:hover:not(:disabled):not(:active) {
    background: $gray-1000;
    color: $red-500;
  }

  &:active:not(:disabled) {
    background: $gray-1100;
    border-color: $gray-1250;
  }
}

.ghosted {
  background: transparent;
  color: $ui-white;

  &:hover:not(:disabled):not(:active) {
    background: $gray-1000;
    color: $ui-white;
  }

  &:active:not(:disabled) {
    background: $gray-1100;
    border-color: $gray-1250;
  }

  &:disabled {
    opacity: $opacity-disabled;
  }
}