// vf-logo

@import 'package.variables.scss';
// Debug information from component's `package.json`:
// ---
/*!
 * Component: #{map-get($componentInfo, 'name')}
 * Version: #{map-get($componentInfo, 'version')}
 * Location: #{map-get($componentInfo, 'location')}
 */

.vf-logo {
  align-items: center;
  color: ui-color(black);
  display: flex;
  min-height: 32px;
  text-decoration: none;
}

.vf-logo__image {
  height: 32px;
}

.vf-logo--extreme {
  @media (min-width: $vf-breakpoint--lg + 1) {
    height: 48px;
  }
}

.vf-logo__text {
  --vf-logo-margin-right: #{map-get($vf-spacing-map, vf-spacing--200)};

  @include set-type(text-body--3, $custom-margin-bottom: 0);
  align-self: center;

  .vf-logo--has-text & {
    margin-left: 16px; // IE11 Fallback
    margin-left: var(--vf-logo-margin-right);
    @media (min-width: 500px) {
      --vf-logo-margin-right: #{map-get($vf-spacing-map, vf-spacing--400)};
    }

    @media (min-width: 999px) {
      --vf-logo-margin-right: #{map-get($vf-spacing-map, vf-spacing--400)};
    }
  }
}