.c-login-card {
  background-color: use-color(base, true-white);
  background-image: url('https://cdn.chattigo.com/assets/img/isotipo-grey.svg');
  background-position: -15% 0;
  background-repeat: no-repeat;
  background-size: 740px;
  box-sizing: border-box;
  color: use-color('base', 'black');
  margin: auto;
  min-height: 100vh;
  padding: 20px 32px 40px;

  @include media-breakpoint-only(tablet) {
    background-position: -115% 140%;
    background-size: 1100px;
  }

  @include media-breakpoint-only(tablet-landscape) {
    background-position: -120% 120%;
    background-size: 1460px;
  }

  @include media-breakpoint-up(tablet) {
    background-image: none;
    background-position: bottom left;
    background-size: 1460px;
    border-radius: 8px;
    box-shadow: $box-shadow-card-lvl-2;
    margin: 20vh auto 0;
    max-width: 456px;
    min-height: 544px;
    padding: 30px 0;

    @include if-block-has-modifier('c-login-card', 'register', true) {
      margin: 14vh auto 0;
    }

    @include if-block-has-modifier('c-login-card', 'reg-msg', true) {
      margin: 28vh auto 0;
      min-height: initial;
      padding: 43px 56px 40px;
      text-align: center;
    }  
  }

  @include element('logo') {
    margin-bottom: 16px;
    margin-top: 40px;

    @include media-breakpoint-up(tablet) {
      margin-top: 32px;
    }

    // TODO: Add docs
    @include if-block-has-modifier('c-login-card', 'register') {
      margin-top: 0;
    }
  }

  @include element('logo-isotipo') {
    height: 63px;
  }
  
  @include element('logo-letters') {
    display: inline-block;
    height: 23px;
    margin-top: 14px;
    width: 100%;
  }

  @include element('header') {
    margin: 0 auto 20px;
    text-align: center;
    width: 100%;
  }

  @include element('body') {
    margin: auto;
    padding: 0 18px;
    text-align: center;

    @include media-breakpoint-up(tablet) {
      margin-bottom: 32px;
      padding: 0 36px;
      width: 360px;
    }

    @include if-block-has-modifier('c-login-card', 'register') {
      text-align: left;
    }
  }

  @include element('error-message') {
    @include use-font('body', 'regular');
    color: use-color(event, error);
    cursor: not-allowed;
    display: inline-block;
    margin: 0;
    padding-top: 4px;
    word-break: break-word;
  }

  @include element('error-block') {
    height: 36px;
    margin: 0 0 16px;
    text-align: center;
  }

  @include element('h2') {
    @include use-font('h3', 'bold');
    margin: 0;
    margin-bottom: 8px;
    padding: 0 15px;
  }
  
  @include element('subheading') {
    @include use-font('subheading', 'regular');
    display: inline-block;
    margin: 0;
    padding: 0 20px;
  }

  @include element('footer-message') {
    @include use-font('body-alt');
    margin: 0;
    text-align: center;
    width: 100%;
  }

  // components rewirtes
  @include element('input') {
    line-height: 24px;
    margin-bottom: 16px;
  }

  .c-button {
    margin-bottom: 16px;
  }
}

.c-login-background {
  background-color: use-color(primary);
  background-image: url('https://cdn.chattigo.com/assets/img/background-login.svg'), use-color(gradients, balanced-dos);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  height: auto;
  left: 0;
  min-height: 100vh;
  position: absolute;
  top: 0;
  width: 100%;
}