:host,
input,
button,
select,
textarea {
  font-family: 'Roboto', sans-serif;
}

.zea-switch {
  display: inline-block;
  overflow: hidden;
  width: 45px;
  height: 16px;
  position: relative;
  color: var(--color-foreground-1);
}

.zea-switch-wrap {
  width: 100%;
  height: 100%;
}

.zea-switch-track {
  width: 25px;
  height: 10px;
  border-radius: 5px;
  position: absolute;
  top: 3px;
  left: 2px;
  background-color: var(--color-foreground-3);
}

.zea-switch-button {
  width: 16px;
  height: 16px;
  border-radius: 8px;
  position: absolute;
  background-color: var(--color-foreground-1);
}

/* button */
.zea-switch.checked .zea-switch-button {
  background-color: var(--color-primary-1);
  left: 13px;
}

.zea-switch.disabled .zea-switch-button {
  background-color: var(--color-foreground-3);
}

.zea-switch.checked.disabled .zea-switch-button {
  background-color: var(--color-foreground-3);
}

/* track */
.zea-switch.checked .zea-switch-track {
  background-color: var(--color-primary-3);
}

.zea-switch.disabled .zea-switch-track {
  background-color: var(--color-disabled-2);
}

.zea-switch.checked.disabled .zea-switch-track {
  background-color: var(--color-disabled-2);
}

input[type='checkbox'] {
  position: relative;
  left: -50000px;
}

.zea-switch-label {
  position: absolute;
  left: 32px;
  top: 2px;
  font-size: 10px;
}

.zea-switch.disabled .zea-switch-label {
  color: var(--color-foreground-3);
}