:root {
  --primary-color: 51,21,110;
  --primary-rgb: rgb(51,21,110);
  --secondary-color: 63, 7, 172;
  --secondary-rgb: rgb(63, 7, 172);
  --accent-color: 160,23,165;
  --accent-rgb: rgb(160,23,165);
}
.primary {
  color: rgb(var(--primary-color));
}
.accent {
  color: rgb(var(--accent-color));
}
.secondary {
  color: rgb(var(--secondary-color));
}

.tag {
  width: 40px;
}
.bg-accent {
  background-color: rgba(var(--accent-color),0.9) !important;
  color:#fff !important;
}
.pointer {
  cursor: pointer;
}

.checkbox input[type='checkbox'] {
  height: 0;
  width: 0;
  visibility: hidden;
}
.checkbox {
  --size: 3rem;
}
.checkbox label {
  cursor: pointer;
  width: calc(var(--size) - 10px);
  height: calc(var(--size) / 2);
  background: grey;
  display: block;
  border-radius: 100px;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type='number'] {
  -moz-appearance: textfield;
}

.checkbox label:after {
  content: '';
  position: absolute;
  top: 0.1rem;
  left: 0.1rem;
  width: calc(var(--size) / 2 - 0.2rem);
  height: calc(var(--size) / 2 - 0.2rem);
  background: #fff;
  border-radius: 90px;
  transition: 0.3s;
}

.checkbox input {
  display: none;
}

.checkbox input:checked + label {
  background: rgb(var(--accent-color));
}

.checkbox input:checked + label:after {
  left: 95%;
  transform: translateX(-100%);
}

.checkbox label:active:after {
  width: 55%;
}

.no-click {
  pointer-events: none;
}

.restore-click {
  pointer-events: auto;
}
