bookmarks-ts/scss/spectre.scss
// spectre's css

$light-gray-color: $soft-gray;
$light-bg-color: lighten($light-gray-color, 10%);

// Form element: Switch
label.switch {
  display: inline-block;
  line-height: 2rem;
  padding: .2rem 2rem .2rem 3.6rem;
  position: relative;
  margin-bottom: 0;

  > i {
    background: $light-gray-color;
    background-clip: padding-box;
    border: .1rem solid $light-gray-color;
    border-radius: .9rem;
    cursor: pointer;
    display: inline-block;
    height: 1.8rem;
    left: 0;
    line-height: 2.6rem;
    outline: none;
    padding: 0;
    position: absolute;
    top: .3rem;
    vertical-align: top;
    width: 3rem;
    &::after {
      background: $light-bg-color;
      border-radius: .8rem;
      content: "";
      display: block;
      height: 1.6rem;
      left: 0;
      position: absolute;
      top: 0;
      transition: left .2s ease;
      width: 1.6rem;
    }
  }

  > input {
    margin: 0 1em 0 -2em;
    &:focus + i {
      &::after {
        background: lighten($primary-color, 40%);
      }
    }
    &:checked + i {
      background: $primary-color;
      border-color: $primary-color;
      &::after {
        left: 1.2rem;
      }
    }
    &:active + i {
      &::after {
        background: $border-color;
      }
    }
  }
}

