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

// scss-lint:disable SelectorDepth QualifyingElement NestingDepth

.sci-toggle-checkbox-container {
  --sci-toggle-check-size: .625rem;
  --sci-toggle-container-height: 1.5rem;
  --sci-toggle-container-width: 2.25rem;
  --sci-toggle-label-border: .0625rem;
  --sci-toggle-label-height: .875rem;
  --sci-toggle-label-width: 1.875rem;
  display: inline-block;
  height: var(--sci-toggle-container-height);
  position: relative;
  width: var(--sci-toggle-container-width);
}

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

  + .sci-toggle-checkbox-label {
    animation-timing-function: $timing-function-sharp;
    background: var(--sn-white);
    border: var(--sci-toggle-label-border) solid var(--sn-grey);
    border-radius: calc(var(--sci-toggle-label-height) / 2);
    display: inline-block;
    flex-shrink: 0;
    font-weight: normal;
    height: var(--sci-toggle-label-height);
    left: calc((var(--sci-toggle-container-width) - var(--sci-toggle-label-width))/2);
    position: absolute;
    top: calc((var(--sci-toggle-container-height) - var(--sci-toggle-label-height))/2);
    transition: .4s;
    width: var(--sci-toggle-label-width);

    &::before {
      animation-timing-function: $timing-function-sharp;
      background: var(--sn-grey);
      border-radius: 50%;
      bottom: calc(var(--sci-toggle-label-height) / 2 - var(--sci-toggle-check-size) / 2);
      content: "";
      left: calc(var(--sci-toggle-label-height) / 2 - var(--sci-toggle-check-size) / 2);
      position: absolute;
      right: calc(var(--sci-toggle-label-width) - var(--sci-toggle-label-height) / 2 - var(--sci-toggle-check-size) / 2);
      top: calc(var(--sci-toggle-label-height) / 2 - var(--sci-toggle-check-size) / 2);
      transition: .6s;
    }
  }

  &:focus + .sci-toggle-checkbox-label {
    box-shadow: 0 0 0 4px var(--sn-science-blue-hover);
    outline: 2px solid transparent;
    outline-offset: 2px;
  }

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

  &:disabled {
    cursor: not-allowed;
  }

  &:checked + .sci-toggle-checkbox-label {
    border-color: var(--sn-blue);

    &::before {
      background-color: var(--sn-science-blue);
      left: calc(var(--sci-toggle-label-width) - var(--sci-toggle-label-height) / 2 - var(--sci-toggle-check-size) / 2);
      right: calc(var(--sci-toggle-label-height) / 2 - var(--sci-toggle-check-size) / 2);
    }
  }

  &:disabled + .sci-toggle-checkbox-label {
    border-color: var(--sn-light-grey);

    &::before {
      background-color: var(--sn-light-grey);
    }
  }

  &:disabled:checked + .sci-toggle-checkbox-label {
    background-color: var(--sn-super-light-grey);
  }
}

.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;
        display: initial;
      }

      &: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;
      }
    }
  }
}