:host {
  display: flex;
  align-items: center;
  gap: 7px;
}

:host(.has-title-and-desc) {
  align-items: flex-start;
}

:host .native {
  position: relative;
  width: 36px;
  height: 20px;
  border: none;
  border-radius: 10px;
  background-color: var(--color-toggle-bg);
  cursor: pointer;
  box-shadow: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px inset, rgba(15, 15, 15, 0.05) 0px 1px 1px;
}

:host .native.checked {
  background-color: var(--color-toggle-bg-checked);
}

/* size */
:host .native {
  width: 36px;
  height: 20px;
  border-radius: 10px;
}

:host .native::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: var(--color-toggle-thumb);
  transition: transform 0.3s ease;
}

:host .native.checked::before {
  transform: translateX(16px);
}

:host .text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

:host .title {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-toggle-title);
}

:host .desc {
  font-size: 12px;
  font-weight: 400;
  color: var(--color-toggle-desc);
}

:host(.small) .native {
  width: 28px;
  height: 16px;
  border-radius: 8px;
}

:host(.small) .native::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  transition: transform 0.3s ease;
}

:host(.small) .native.checked::before {
  transform: translateX(12px);
}

:host(.small) {
  gap: 5px;
}
:host(.small) .text {
  gap: 2px;
}
:host(.small) .title {
  font-size: 13px;
  font-weight: 500;
}
:host(.small) .desc {
  font-size: 11px;
  font-weight: 400;
}

:host(.large) {
  gap: 10px;
}
:host(.large) .text {
  gap: 5px;
}
:host(.large) .title {
  font-size: 16px;
  font-weight: 500;
}
:host(.large) .desc {
  font-size: 14px;
  font-weight: 400;
}

:host(.large) .native {
  width: 42px;
  height: 24px;
  border: none;
  border-radius: 14px;
}

:host(.large) .native::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  transition: transform 0.3s ease;
}

:host(.large) .native.checked::before {
  transform: translateX(18px);
}

slot {
  font-size: 14px;
  display: block;
}