<script>import { classNames } from '../../functions/classNames';
const [className] = classNames('Button');
/**
 * Rounded button
 */
export let rounded = false;
export let icon = '';
export let iconRight = '';
/**
 * Label text
 */
export let label = '';
export let disabled = false;
export let isIcon = false;
export let theme = '';
export let raised = false;
export let size = 'md';
export let block = false;
export let type = "submit";
export let loading = false;
$: noLabel = !label && !$$slots.default && !$$slots.left && !$$slots.right;
</script>

<button
	class={[className, theme, $$props.class, size].join(' ')}
	class:rounded
	on:click
	disabled="{disabled || loading}"
	class:noLabel
	class:iconLeft={!icon && !!$$slots.left}
	class:iconRight={!icon && !!$$slots.right}
	class:isIcon
	class:raised
	class:block
	class:loading
	{type}
	style={$$props.style}
>
	{#if loading || !!icon || $$slots.left}
		<div class="left">
			{#if $$slots.left}
				<slot name="left" />
			{:else}
				<i class={loading ? "fa fa-spin fa-spinner": icon}></i>
			{/if}
		</div>
	{/if}
	<slot>
		<span>{label}</span>
	</slot>
	{#if !!iconRight || $$slots.right}
		<div class="right">
			{#if $$slots.right}
				<slot name="right" />
			{:else}
				<i class={iconRight} />
			{/if}
		</div>
	{/if}
</button>

<style>[disabled] {
  opacity: 0.6;
}

button {
  height: var(--ui-button_size-height, 33px);
  min-width: var(--ui-button_size-min-width, 33px);
  width: var(--ui-button_size-width, auto);
  position: relative;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
  color: var(--ui-theme-secondary);
  background-color: -internal-light-dark(rgb(239, 239, 239), rgb(59, 59, 59));
  margin: 0;
  border: 0;
  outline: 0 none;
  border-radius: var(--ui-border-default);
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
  padding: 0 15px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
button i,
button :global(i) {
  color: inherit;
}
button:focus {
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #b1b3f8, 0 1px 2px 0 black;
  outline: 0 none;
  outline-offset: 0;
}
button:hover {
  opacity: 0.8;
}

span {
  display: block;
  line-height: normal;
  padding: 0.5rem 1rem;
  color: inherit;
}

i {
  color: inherit;
}

.right,
.left {
  color: inherit;
}

.rounded {
  border-radius: 2rem;
}

.noLabel .left,
.noLabel .right {
  padding: 0;
}
.noLabel span {
  display: none;
}

.raised {
  box-shadow: var(--ui-raised);
}

.isIcon {
  justify-content: center;
  --ui-button_size-width: 33px;
  --ui-button_size-height: 33px;
}

.block {
  width: 100%;
  text-align: center;
  justify-content: center;
}

.primary {
  background-color: var(--ui-primary);
  color: var(--ui-theme-primary);
}
.primary:hover {
  opacity: 0.9;
}

.secondary {
  background-color: var(--ui-secondary);
  color: var(--ui-theme-primary);
}
.secondary:hover {
  opacity: 0.9;
}

.danger {
  background-color: var(--ui-danger);
  color: var(--ui-theme-primary);
}
.danger:hover {
  opacity: 0.9;
}

.info {
  background-color: var(--ui-info);
  color: var(--ui-theme-primary);
}
.info:hover {
  opacity: 0.9;
}

.success {
  background-color: var(--ui-success);
  color: var(--ui-theme-primary);
}
.success:hover {
  opacity: 0.9;
}

.warning {
  background-color: var(--ui-warning);
  color: var(--ui-theme-primary);
}
.warning:hover {
  opacity: 0.9;
}

.default {
  background-color: var(--ui-default);
  color: var(--ui-theme-primary);
}
.default:hover {
  opacity: 0.9;
}

.dark {
  background-color: var(--ui-dark);
  color: var(--ui-theme-primary);
}
.dark:hover {
  opacity: 0.9;
}

.white {
  background-color: var(--ui-white);
  color: var(--ui-theme-primary);
}
.white:hover {
  opacity: 0.9;
}</style>
