scinote-web/app/assets/stylesheets/shared_styles/elements/toggles.scss

// scss-lint:disable SelectorDepth QualifyingElement NestingDepth

.sci-toggle-checkbox-container {
  display: inline-block;
  height: 16px;
  position: relative;
  width: 24px;
}

input[type="checkbox"].sci-toggle-checkbox {
  cursor: pointer;
  flex-shrink: 0;
  height: 16px;
  margin: 0;
  opacity: 0;
  position: relative;
  width: 24px;
  z-index: 2;

  + .sci-toggle-checkbox-label {
    animation-timing-function: $timing-function-sharp;
    background: $color-alto;
    border-radius: 8px;
    display: inline-block;
    flex-shrink: 0;
    font-weight: normal;
    height: 16px;
    left: 0;
    position: absolute;
    top: 0;
    transition: .2s;
    width: 24px;

    &::before {
      animation-timing-function: $timing-function-sharp;
      background: $color-white;
      border-radius: 7px;
      content: "";
      height: 12px;
      left: 0;
      margin: 2px;
      position: absolute;
      transition: .2s;
      width: 12px;
    }
  }

  &.hidden + .sci-toggle-checkbox-label {
    display: none;
  }

  &:checked + .sci-toggle-checkbox-label {
    background: $brand-primary;

    &::before {
      left: 8px;
    }
  }

  &:disabled + .sci-toggle-checkbox-label {

    &::before {
      background: $color-silver-chalice;
    }
  }
}

.sci-toggles-group {
  align-items: center;
  display: flex;
  position: relative;

  input[type="radio"].sci-toggle-item {
    cursor: pointer;
    height: 36px;
    margin: 0;
    opacity: 0;
    position: relative;
    width: 48px;
    z-index: 2;

    + .sci-toggle-item-label {
      animation-timing-function: $timing-function-sharp;
      background: $color-white;
      border: $border-default;
      border-left-color: transparent;
      color: $color-black;
      display: inline-block;
      font-weight: normal;
      height: 36px;
      line-height: 34px;
      margin-left: -48px;
      position: relative;
      text-align: center;
      transition: .2s;
      width: 48px;

      svg,
      svg path {
        fill: $color-black;
      }

      &:first-of-type {
        border-left-color: $color-silver-chalice;
        border-radius: $border-radius-default 0 0 $border-radius-default;
      }

      &:last-of-type {
        border-radius: 0 $border-radius-default $border-radius-default 0;
      }
    }

    &:checked + .sci-toggle-item-label {
      background: $brand-primary;
      border: 1px solid $brand-primary;
      color: $color-white;

      svg,
      svg path {
        fill: $color-white;
      }
    }
  }
}