ontime/apps/client/src/common/components/buttons/_buttonVariants.scss

@use '@/theme/themeTokens' as *;
@use '@/theme/viewerDefs' as *;

@mixin button-variants {
  .subtle {
    background: $gray-1050;
    color: $blue-400;
    line-height: 1em;

    &: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: $blue-500;

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

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

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

  .ghosted-white {
    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;
    }
  }

  .ghosted-destructive {
    background: transparent;
    color: $red-500;

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

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

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