// 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)}; } } }