@import './StyleConstants';

.toggle {
  width: 32px;
  height: 12px;
  padding: 4px;
  border-radius: 14px;
  background: white;
  border: 1px solid black;
  transition: .2s;
  cursor: pointer;
  display: inline-block;
  position: relative;
  top: 4px;
  margin-right: 10px;

  .toggle-inner {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: black;
    transition: .2s;
    position: relative;
    left: -2px;
    top: -1.5px;
  }

  &.toggled {
    border: 1px solid $beatdrop-blue;

    .toggle-inner {
      background: $beatdrop-blue;
      left: 17.5px;
    }
  }
}

.theme-hc .toggle.toggled {
  border: 1px solid $theme-hc-accent-color;

  .toggle-inner {
    background: $theme-hc-accent-color;
  }
}