<script>import { BEM } from '../../models/BEM';
export let checked = false;
export let id = '';
export let name = '';
export let disabled = false;
export let theme = 'primary';
const bm = new BEM('UI-Switch', {});
bm.append('UI-Switch');
</script>

<label class={bm.toString()} class:checked class:disabled on:click>
	<input {id} {name} type="checkbox" role="switch" aria-checked="true" bind:checked {disabled}/>
	<span class={bm.className('slider', { [theme]: !!theme })} />
	<slot />
</label>

<style>label {
  width: 3rem;
  height: 1.75rem;
  position: relative;
  display: inline-block;
}

input {
  display: none;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid transparent;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
  border-radius: 30px;
  background: #ced4da;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
  border-radius: 30px;
}
.slider::before {
  position: absolute;
  content: "";
  top: 50%;
  background: var(--ui-white);
  width: 1.25rem;
  height: 1.25rem;
  left: 0.25rem;
  margin-top: -0.625rem;
  border-radius: 50%;
  transition-duration: 0.2s;
}

.checked .slider {
  background: var(--ui-primary);
}
.checked .slider::before {
  transform: translateX(1.05rem);
}

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

.disabled {
  opacity: var(--ui-disabled);
}</style>
