leadchat/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-woot-500 dark:bg-woot-500 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 {
    @apply bg-woot-600 dark:bg-woot-600;
  }

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

  &.success {
    @apply bg-[#44ce4b] text-white dark:text-white;
  }

  &.secondary {
    @apply bg-slate-700 dark:bg-slate-600 text-white dark:text-white;
  }

  &.primary {
    @apply bg-woot-500 dark:bg-woot-500 text-white dark:text-white;
  }

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

  &.alert {
    @apply bg-red-500 dark:bg-red-500 text-white dark:text-white;

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

  &.warning {
    @apply bg-[#ffc532] dark:bg-[#ffc532] 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-woot-500 bg-transparent dark:bg-transparent dark:border-woot-500 text-woot-500 dark:text-woot-500 hover:bg-woot-50 dark:hover:bg-woot-900;

    &.secondary {
      @apply text-slate-700 border-slate-200 dark:border-slate-600 dark:text-slate-100 hover:bg-slate-50 dark:hover:bg-slate-700;
    }

    &.success {
      @apply text-green-700 dark:text-green-400 border-green-100 dark:border-green-600 hover:bg-green-50 dark:hover:bg-green-800;
    }

    &.alert {
      @apply text-red-700 dark:text-red-400 border-red-100 dark:border-red-600 hover:bg-red-50 dark:hover:bg-red-800;
    }

    &.warning {
      @apply text-yellow-600 dark:text-yellow-600 border-yellow-600 dark:border-yellow-700 hover:bg-yellow-50 dark:hover:bg-yellow-800;
    }

    &:hover {
      @apply bg-woot-75 dark:bg-woot-800 border-slate-100 dark:border-woot-600 dark:text-woot-400;

      &.secondary {
        @apply border-slate-100 dark:border-slate-700 text-slate-800 dark:text-slate-100;
      }

      &.success {
        @apply border-slate-100 dark:border-slate-700 text-green-800 dark:text-green-100;
      }

      &.alert {
        @apply border-slate-100 dark:border-slate-700 text-red-700 dark:text-red-100;
      }

      &.warning {
        @apply border-slate-100 dark:border-slate-700 text-yellow-700 dark:text-yellow-500;
      }
    }
  }

  // Smooth style
  &.smooth {
    @apply bg-woot-50 dark:bg-woot-800 text-woot-700 dark:text-woot-100 hover:text-woot-700 dark:hover:text-woot-700 hover:bg-woot-100 dark:hover:bg-woot-900;

    &.secondary {
      @apply bg-slate-50 dark:bg-slate-700 text-slate-700 dark:text-slate-100 hover:bg-slate-100 dark:hover:bg-slate-800;
    }

    &.success {
      @apply bg-green-50 dark:bg-green-700 text-green-700 dark:text-green-100 hover:bg-green-100 dark:hover:bg-green-800 hover:text-green-800 dark:hover:text-green-100;
    }

    &.alert {
      @apply bg-red-50 dark:bg-red-700 dark:bg-opacity-50 text-red-700 dark:text-red-100 hover:bg-red-100 dark:hover:bg-red-800 dark:hover:bg-opacity-30;
    }

    &.warning {
      @apply bg-yellow-100 dark:bg-yellow-100 text-yellow-700 dark:text-yellow-700 hover:bg-yellow-200 dark:hover:bg-yellow-200;
    }
  }

  &.clear {
    @apply text-woot-500 dark:text-woot-500;

    &.secondary {
      @apply text-slate-700 dark:text-slate-100;
    }

    &.success {
      @apply text-green-700 dark:text-green-100;
    }

    &.alert {
      @apply text-red-700 dark:text-red-100;
    }

    &.warning {
      @apply text-yellow-700 dark:text-yellow-600;
    }

    &:hover {
      @apply hover:bg-woot-50 dark:hover:bg-woot-900/50 hover:text-woot-500 dark:hover:text-woot-100;

      &.secondary {
        @apply hover:bg-slate-50 dark:hover:bg-slate-700 hover:text-slate-800 dark:hover:text-slate-100;
      }

      &.success {
        @apply hover:bg-green-50 dark:hover:bg-green-800 hover:text-green-800 dark:hover:text-green-100;
      }

      &.alert {
        @apply hover:bg-red-50 dark:hover:bg-red-800 hover:text-red-700 dark:hover:text-red-100;
      }

      &.warning {
        @apply hover:bg-yellow-100 dark:hover:bg-yellow-800 hover:text-yellow-700 dark:hover:text-yellow-600;
      }
    }

    &:active {
      &.secondary {
        @apply active:bg-slate-100 dark:active:bg-slate-900;
      }
    }

    &:focus {
      &.secondary {
        @apply focus:bg-slate-50 dark:focus:bg-slate-700;
      }
    }
  }

  // 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;
    }
  }
}