// vf-badge

@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-badge--primary-color--background: color(blue) !default;
$vf-badge--primary-color--border: color(blue) !default;
$vf-badge--primary-color--text: ui-color(white) !default;
$vf-badge--primary--hover-color--background: color(blue--dark) !default;
$vf-badge--primary--hover-color--border: color(blue--dark) !default;

$vf-badge--outline-color--background: transparent !default;
$vf-badge--outline-color--text: color(blue) !default;

$vf-badge--tertiary-color--background: color(grey--dark) !default;
$vf-badge--tertiary-color--border: color(grey--dark) !default;
$vf-badge--tertiary-color--text: ui-color(white) !default;


.vf-badge {
  @include set-type(text-button--2, $custom-margin-bottom: disable);

  border: 2px solid;
  color: inherit;
  display: inline-flex;
  letter-spacing: .05em;
  padding: 4px 8px;
  text-decoration: none;
  text-transform: uppercase;
}

.vf-badge--primary {
  @include theme(primary, border);

  color: $vf-badge--primary-color--text;

  a.vf-badge & {
    @include inline-link($vf-badge--primary-color--text,$vf-badge--primary-color--text,$vf-badge--primary-color--text, $vf-include-normalisations: false);
  }
}

a.vf-badge--primary:hover {
  @include theme(primary--dark, border);
}


.vf-badge--secondary {

  @include theme-outline(primary);

  @at-root a#{&} {
    &:hover {
      @include theme-outline(primary--dark);
    }
  }

}

.vf-badge--tertiary {
  @include inline-link($vf-badge--tertiary-color--text,$vf-badge--tertiary-color--text,$vf-badge--tertiary-color--text, $vf-include-normalisations: false);
  @include theme(tertiary, border);
}