chatwoot/app/javascript/dashboard/assets/scss/widgets/_buttons.scss

// scss-lint:disable SpaceAfterPropertyColon
// scss-lint:disable MergeableSelector
button {
  font-family: inherit;
  transition:
    background-color 0.25s ease-out,
    color 0.25s ease-out;
  @apply inline-block items-center mb-0 text-center align-middle cursor-pointer text-sm mt-0 mx-0 py-1 px-2.5 border border-solid border-transparent dark:border-transparent rounded-[0.3125rem];

  &:disabled,
  &.disabled {
    @apply opacity-40 cursor-not-allowed;
  }
}

.button-group {
  @apply mb-0 flex flex-nowrap items-stretch;

  .button {
    flex: 0 0 auto;
    @apply m-0 text-sm rounded-none first:rounded-tl-[0.3125rem] first:rounded-bl-[0.3125rem] last:rounded-tr-[0.3125rem] last:rounded-br-[0.3125rem] rtl:space-x-reverse;
  }

  .button--only-icon {
    @apply w-10 justify-center pl-0 pr-0;
  }
}

.back-button {
  @apply m-0;
}

.button {
  @apply items-center bg-n-brand px-2.5 text-white dark:text-white inline-flex h-10 mb-0 gap-2 font-medium;

  .button__content {
    @apply w-full whitespace-nowrap overflow-hidden text-ellipsis;

    img,
    svg {
      @apply inline-block;
    }
  }

  &:hover:not(:disabled):not(.success):not(.alert):not(.warning):not(
      .clear
    ):not(.smooth):not(.hollow) {
    @apply bg-n-brand/80 dark:bg-n-brand/80;
  }

  &:disabled,
  &.disabled {
    @apply opacity-40 cursor-not-allowed;
  }

  &.success {
    @apply bg-n-teal-9 text-white dark:text-white;
  }

  &.secondary {
    @apply bg-n-solid-3 text-white dark:text-white;
  }

  &.primary {
    @apply bg-n-brand text-white dark:text-white;
  }

  &.clear {
    @apply text-n-blue-text dark:text-n-blue-text bg-transparent dark:bg-transparent;
  }

  &.alert {
    @apply bg-n-ruby-9 text-white dark:text-white;

    &.clear {
      @apply bg-transparent dark:bg-transparent;
    }
  }

  &.warning {
    @apply bg-n-amber-9 text-white dark:text-white;

    &.clear {
      @apply bg-transparent dark:bg-transparent;
    }
  }

  &.tiny {
    @apply h-6 text-[10px];
  }

  &.small {
    @apply h-8 text-xs;
  }

  .spinner {
    @apply px-2 py-0;
  }

  // @TODDO - Remove after moving all buttons to woot-button
  .icon + .button__content {
    @apply w-auto;
  }

  &.expanded {
    @apply flex justify-center text-center;
  }

  &.round {
    @apply rounded-full;
  }

  // @TODO Use with link

  &.compact {
    @apply pb-0 pt-0;
  }

  &.hollow {
    @apply border border-n-brand/40 bg-transparent text-n-blue-text hover:enabled:bg-n-brand/20;

    &.secondary {
      @apply text-n-slate-12 border-n-slate-5 hover:enabled:bg-n-slate-5;
    }

    &.success {
      @apply text-n-teal-9 border-n-teal-8 hover:enabled:bg-n-teal-5;
    }

    &.alert {
      @apply text-n-ruby-9 border-n-ruby-8 hover:enabled:bg-n-ruby-5;
    }

    &.warning {
      @apply text-n-amber-9 border-n-amber-8 hover:enabled:bg-n-amber-5;
    }
  }

  // Smooth style
  &.smooth {
    @apply bg-n-brand/10 dark:bg-n-brand/30 text-n-blue-text hover:enabled:bg-n-brand/20 dark:hover:enabled:bg-n-brand/40;

    &.secondary {
      @apply bg-n-slate-4 text-n-slate-11 hover:enabled:text-n-slate-11 hover:enabled:bg-n-slate-5;
    }

    &.success {
      @apply bg-n-teal-4 text-n-teal-11 hover:enabled:text-n-teal-11 hover:enabled:bg-n-teal-5;
    }

    &.alert {
      @apply bg-n-ruby-4 text-n-ruby-11 hover:enabled:text-n-ruby-11 hover:enabled:bg-n-ruby-5;
    }

    &.warning {
      @apply bg-n-amber-4 text-n-amber-11 hover:enabled:text-n-amber-11 hover:enabled:bg-n-amber-5;
    }
  }

  &.clear {
    @apply text-n-blue-text hover:enabled:bg-n-brand/10 dark:hover:enabled:bg-n-brand/30;

    &.secondary {
      @apply text-n-slate-12 hover:enabled:bg-n-slate-4;
    }

    &.success {
      @apply text-n-teal-10 hover:enabled:bg-n-teal-4;
    }

    &.alert {
      @apply text-n-ruby-11 hover:enabled:bg-n-ruby-4;
    }

    &.warning {
      @apply text-n-amber-11 hover:enabled:bg-n-amber-4;
    }

    &:active {
      &.secondary {
        @apply active:bg-n-slate-3 dark:active:bg-n-slate-7;
      }
    }

    &:focus {
      &.secondary {
        @apply focus:bg-n-slate-4 dark:focus:bg-n-slate-6;
      }
    }
  }

  // Sizes
  &.tiny {
    @apply h-6;
  }

  &.small {
    @apply h-8 pb-1 pt-1;
  }

  &.large {
    @apply h-12;
  }

  &.button--only-icon {
    @apply justify-center pl-0 pr-0 w-10;

    &.tiny {
      @apply w-6;
    }

    &.small {
      @apply w-8;
    }

    &.large {
      @apply w-12;
    }
  }

  &.link {
    @apply h-auto m-0 p-0;

    &:hover {
      @apply underline;
    }
  }
}