Generated by SassMeister.com.

browserslist

> 1%
last 2 versions

SassMeister-input.scss

// ----
// libsass (v3.3.6)
// ----

@mixin heading-2() {
  font-size: 1.1rem;
  line-height: 1.2;
  font-weight: 500;
}
@mixin button($color: #fff, $bg-color: #f00) {
  background-color: $bg-color;
  color: $color;
  border-radius: 5px;
}
.modal {
  $block: &;
  position: fixed;
  top: 0;
  left: 0;
  width: 500px;
  
  
  &--activate {
    width: 400px;
    
    #{$block}__header {
      margin-bottom: 20px;
    }
    #{$block}__sub-title {
      @include heading-2;
      max-width: 350px;
      margin: -30px auto 5px;
    }
    #{$block}__button {
      @include button();
      
      &--next-step {
        max-width: 350px;
        margin: -30px auto 5px;
      }
    }
    .helpline {
      @include heading-2;
      margin-bottom: 0;
      margin-top: 15px;
      
      &__sub-title {
        font-weight: 400;
        line-height: 2;
        
        a {
          font-weight: 400;
        }
      }
    }
  }
}

SassMeister-output.css

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 500px;
}

.modal--activate {
  width: 400px;
}

.modal--activate .modal__header {
  margin-bottom: 20px;
}

.modal--activate .modal__sub-title {
  font-size: 1.1rem;
  line-height: 1.2;
  font-weight: 500;
  max-width: 350px;
  margin: -30px auto 5px;
}

.modal--activate .modal__button {
  background-color: #f00;
  color: #fff;
  border-radius: 5px;
}

.modal--activate .modal__button--next-step {
  max-width: 350px;
  margin: -30px auto 5px;
}

.modal--activate .helpline {
  font-size: 1.1rem;
  line-height: 1.2;
  font-weight: 500;
  margin-bottom: 0;
  margin-top: 15px;
}

.modal--activate .helpline__sub-title {
  font-weight: 400;
  line-height: 2;
}

.modal--activate .helpline__sub-title a {
  font-weight: 400;
}