by pivica: form required mark needs to have span elements so it does not...

}

.form {

  &-required::after {

  &-required-mark::after {

    display: inline-block;

    margin-left: 0.3em;

    content: '*';

      &::before {

        border: $input-btn-border-width solid $input-border-color;

      }

      // For some reason Bootstrap is adding after pseudo element which is

      // absolute positioned and empty. This will mess up position of our

      // required element so for now lets just reset position to

      // static.

      &.form-required::after {

        position: static;

      }

    }

    &-input:checked ~ .custom-control-label::before {

%}

{% block label %}

  {% if title is not empty or required -%}

    <label{{ attributes.addClass(classes) }}>{{ title }}</label>

    <label{{ attributes.addClass(classes) }}>{{ title }}{% if required %}<span class="form-required-mark"></span>{% endif %}</label>

  {%- endif %}

{% endblock label %}