@import 'variables';
@import 'functions';

.twofas-light-logo-header {
  padding-top: 10px;
  margin-bottom: 29px;

  @media all and (max-width: 782px) {
    margin-bottom: 15px;
  }

  @media all and (max-width: $screen-xs) {
    padding-top: 0;
  }

  h1 {
    $logo-image-size: 35px;
    $spacing-between-logo-and-title: 12px;

    font-size: 0;
    min-height: $logo-image-size;
    padding: 0;

    img,
    .twofas-light-logo-header-title {
      display: inline-block;
      vertical-align: middle;
    }

    img {
      height: $logo-image-size;
      width: $logo-image-size;
    }

    .twofas-light-logo-header-title {
      font-size: px-to-rem(16);
      font-weight: 500;
      line-height: px-to-rem(20);
      margin-left: $spacing-between-logo-and-title;
      padding: 9px 0 4px;
      width: calc(100% - #{$logo-image-size} - #{$spacing-between-logo-and-title});

      @media all and (max-width: $screen-xs) {
        font-size: px-to-rem(15);
      }
    }
  }
}