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

  &:hover {
    cursor: pointer;
  }
}

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

  &.isDark {
    left: calc(100% - 24px);
  }
}

.icons {
  position: absolute;
  display: flex;
  justify-content: space-around;
  opacity: 0.5;
}

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

  .indicator {
    border: 1px solid var(--nav-background);
    background: var(--nav-background);
  }
}
