bb-styled-checkbox {

  .styled-checkbox {

    input[type="checkbox"] {
      opacity: 0;
      margin: 0;

      + label::after {
        content: none;
      }

      &:checked {
        + label::before {
          background-color: $studio-cyan-blue;
          border: 0;
        }

        + label::after {
          content: '';
        }
      }
    }

    label {
      color: $studio-raven-pale-gray;
      font: {
        size: 15px;
        weight: normal;
      }
      margin: {
        top: 0;
        right: 0;
        bottom: 0;
        left: -13px;
      }
      padding-left: spacing(26);
      cursor: pointer;
      position: relative;

      &::before,
      &::after {
        content: ' ';
        display: inline-block;
        position: absolute;
      }

      &::before {
        border: border(1);
        border-radius: 3px;
        height: 18px;
        top: 1px;
        left: -3px;
        width: 18px;
      }

      &::after {
        border-left: 2px solid white;
        border-bottom: 2px solid white;
        height: 6px;
        left: 0.5px;
        top: 6px;
        transform: rotate(-45deg);
        width: 11px;
      }
    }

    &__label {
      &--disabled {
        cursor: not-allowed;
      }
    }
  }
}