.toggle {
  width: 50px;
  height: 30px;
  border-radius: 20px;
  border: 1px solid var(--default);
  padding: 4px;
  position: relative;

  &:not(.readOnly):hover {
    cursor: pointer;
  }

  &.small {
    width: 30px;
    height: 16px;
    border-radius: 10px;
    padding: 2px;
  }
}

.indicator {
  position: absolute;
  left: 4px;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  border: 1px solid var(--default);
  background-color: var(--default);
  transition: left 0.3s ease;
  will-change: left;

  &.on {
    left: calc(100% - 24px);
    background-color: var(--primary);
  }
}

.toggle.small {
  .indicator {
    left: 2px;
    width: 10px;
    height: 10px;

    &.on {
      left: calc(100% - 12px);
    }
  }
}

[data-theme='dark'] {
  .toggle {
    border-color: var(--divider);
  }

  .indicator {
    border: 1px solid var(--divider);
    background-color: var(--divider);

    &.on {
      border: 1px solid var(--primary);
      background-color: var(--primary);
    }
  }
}
