$logoDefaultHeight: 60px;
$logoDefaultWidth: 134px;
$logoLargeHeight: 81px;
$logoLargeWidth: 180px;

$includeHtml: false !default;

@if ($includeHtml) {
  .sg-logo {
    @include component();
    height: $logoDefaultHeight;
    width: $logoDefaultWidth;

    @include sgResponsive(md) {
      height: $logoLargeHeight;
      width: $logoLargeWidth;
    }

    &--znanija-plus-small {
      width: $logoDefaultWidth;
      height: 68px;

      @include sgResponsive(md) {
        width: $logoLargeWidth;
        height: 92px;
      }
    }

    &--znanija-plus,
    &--znanija-plus-inverse {
      width: $logoDefaultWidth;
      height: 90px;

      @include sgResponsive(md) {
        width: $logoLargeWidth;
        height: 120px;
      }
    }

    &--brainly-tutoring,
    &--brainly-tutoring-inverse {
      width: $logoDefaultWidth;
      height: 67px;

      @include sgResponsive(md) {
        width: $logoLargeWidth;
        height: 90px;
      }
    }

    &--brainly-plus,
    &--brainly-plus-inverse {
      width: $logoDefaultWidth;
      height: 55px;

      @include sgResponsive(md) {
        width: $logoLargeWidth;
        height: 73px;
      }
    }

    &--eodev {
      width: 114px;

      @include sgResponsive(md) {
        width: 154px;
      }
    }

    &--nosdevoirs {
      width: 161px;

      @include sgResponsive(md) {
        width: 217px;
      }
    }

    &--znanija {
      width: 131px;

      @include sgResponsive(md) {
        width: 176px;
      }
    }

    &--brainly-mobile,
    &--brainly-mobile-inverse,
    &--nosdevoirs-mobile,
    &--nosdevoirs-mobile-inverse,
    &--eodev-mobile,
    &--eodev-mobile-inverse,
    &--znanija-mobile,
    &--znanija-mobile-inverse {
      height: $logoDefaultHeight;
      width: $logoDefaultHeight;

      @include sgResponsive(md) {
        height: $logoLargeHeight;
        width: $logoLargeHeight;
      }
    }

    &__image {
      width: 100%;
      height: 100%;
    }
  }
}