@gov-design-system-ce/components 0.0.1

package/dist/collection/components/gov-badge/gov-badge.css

@@ -0,0 +1,996 @@
+/* stylelint-disable */
+/* stylelint-enable */
+/* stylelint-disable */
+/* stylelint-enable */
+/* stylelint-disable */
+/* stylelint-enable */
+/* stylelint-disable */
+/* stylelint-enable */
+/* [Core] - Buttons
+------------------------------------------------------------------ */
+/*
+ * Gets color from theme-colors or from palette-colors
+ */
+/*
+ * Converts hex value to rgb colors value
+ */
+/* stylelint-disable order/order */
+/* stylelint-enable order/order */
+/*
+ * Generates list of utility classes for margin, padding
+ *
+ * Make sure $list of definitions is sorted so that last item is defined last
+ * So largest views are mentioned last.
+ */
+/*
+ -  Variables - Sizes
+ */
+/* "Constants" for general usage */
+/*
+ -  Variables - Layout
+ */
+/**
+* Utilities - Offset
+*/
+/* stylelint-disable order/order */
+/* stylelint-enable order/order */
+/* stylelint-disable order/order */
+/* stylelint-enable order/order */
+/* stylelint-disable order/order */
+/* stylelint-enable order/order */
+/**
+* Generates CSS3 var with default value
+*/
+/*
+ -  Variables - General
+ */
+/*
+ -  Variables - Typography
+ */
+/*
+ -  Variables - Sizes
+ */
+/* "Constants" for general usage */
+/*
+ -  Variables - Variants
+ */
+/*
+ -  Variables - Layout
+ */
+/*
+ -  Variables - Accordion
+ */
+/*
+ -  Variables - Attachments
+ */
+/*
+ -  Variables - Alert
+ */
+/*
+ -  Variables - Backdrop
+ */
+/*
+ -  Variables - Buttons (&& Badges)
+ */
+/*
+ -  Variables - Classes
+ */
+/*
+ -  Variables - Colors
+ */
+/*
+ -  Variables - Cookiebar
+ */
+/*
+ -  Variables - Card
+ */
+/*
+ -  Variables - Container
+ */
+/*
+ -  Variables - Message
+ */
+/*
+ -  Variables - Empty
+ */
+/*
+ -  Variables - Error code
+ */
+/*
+ -  Variables - Grid
+ */
+/*
+ -  Variables - Modal & Prompt
+ */
+/**
+* Utilities - Offset
+*/
+/*
+ -  Variables - shadows
+ */
+/* "Constants" for general usage */
+/*
+ -  Variables - Statsbar
+ */
+/*
+ -  Variables - Tabs
+ */
+/*
+ -  Variables - Tooltip
+ */
+/*
+ -	Variables - Forms
+ */
+/*
+ -  Variables - Form Autocomplete
+ */
+/*
+ -  Variables - Form Message
+ */
+/*
+ -	Variables - Form label
+ */
+/*
+ -	Variables - Form switch
+ */
+/*
+ -	Variables - Form select
+ */
+/*
+ -	Variables - Form input
+ */
+/*
+ -	Variables - Form multiselect
+ */
+/*
+ -	Variables - Form checkbox & radio
+ */
+/*
+ -	Variables - Form file
+ */
+/*
+ -  Variables - Toast Message
+ */
+/*
+ -  Variables - Wizzard
+ */
+/*
+ -  Variables - Stepper
+ */
+/*
+ -  Variables - Grid & Tile
+ */
+/*
+ -  Variables - Pagination
+ */
+.gov-spin-animation,
+.gov-pseudo-spin-animation::before {
+  animation: spin 4s linear infinite;
+}
+
+@keyframes spin {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+/*
+*   Badge
+*/
+/*
+ *   Button & Badge Shared Definitions
+ */
+.gov-badge {
+  display: inline-flex;
+}
+.gov-badge .element {
+  margin: 0;
+  padding: 0;
+  font-family: "Roboto", sans-serif;
+  font-weight: 400;
+  box-sizing: border-box;
+  display: inline-flex;
+  vertical-align: middle;
+  justify-content: center;
+  align-items: center;
+  border: 0;
+  background-color: transparent;
+  text-align: center;
+  text-decoration: none;
+  cursor: pointer;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  border: var(--gov-button-border-width, 0.0625rem) solid transparent;
+  transition: background-color 150ms ease-in-out, border-color 150ms ease-in-out, color 150ms ease-in-out;
+  cursor: inherit;
+  will-change: background-color, border-color;
+}
+.gov-badge .element:focus {
+  outline: none;
+}
+.gov-badge .element .gov-icon {
+  flex: 0 0 auto;
+  color: inherit;
+}
+.gov-badge .element > * {
+  display: flex;
+}
+[hoverable].gov-badge .element {
+  cursor: pointer;
+}
+[hoverable].gov-badge .element:focus {
+  outline: none;
+}
+[hoverable].gov-badge .element:focus-visible {
+  border-radius: var(--gov-border-radius, 0.1875rem);
+  outline: var(--gov-outline-width, 0.125rem) solid var(--gov-color-focus-base);
+  outline-offset: 0.0625rem;
+}
+[hoverable][type=outlined].gov-badge .element:focus-visible, [hoverable][type=base].gov-badge .element:focus-visible {
+  outline-offset: 0;
+}
+[hoverable][disabled=""].gov-badge, [hoverable][disabled=true i].gov-badge, [hoverable][disabled="1"].gov-badge {
+  cursor: not-allowed;
+}
+[hoverable][disabled=""].gov-badge .element, [hoverable][disabled=true i].gov-badge .element, [hoverable][disabled="1"].gov-badge .element {
+  pointer-events: none;
+}
+[expanded=""].gov-badge, [expanded=true i].gov-badge, [expanded="1"].gov-badge {
+  display: block;
+}
+[expanded=""].gov-badge .element, [expanded=true i].gov-badge .element, [expanded="1"].gov-badge .element {
+  display: flex;
+  width: 100%;
+  margin-right: 0;
+  margin-left: 0;
+}
+[type=solid][variant=primary].gov-badge .element {
+  background-color: var(--gov-button-primary-solid-bg, var(--gov-color-primary));
+  color: var(--gov-button-primary-solid-color, var(--gov-color-secondary-100));
+  border-width: 0;
+}
+[type=solid][variant=primary][inverse=""].gov-badge .element, [type=solid][variant=primary][inverse=true i].gov-badge .element, [type=solid][variant=primary][inverse="1"].gov-badge .element {
+  color: var(--gov-button-primary-solid-inverse-color, var(--gov-color-primary));
+  background-color: var(--gov-button-primary-solid-inverse-bg, var(--gov-color-secondary-100));
+}
+[type=solid][variant=primary][disabled=""].gov-badge .element, [type=solid][variant=primary][disabled=true i].gov-badge .element, [type=solid][variant=primary][disabled="1"].gov-badge .element {
+  background-color: var(--gov-button-primary-solid-disabled-bg, var(--gov-color-primary-300));
+  color: var(--gov-button-primary-solid-disabled-color, var(--gov-color-secondary-100));
+}
+[type=solid][variant=primary][disabled=""][inverse=""].gov-badge .element, [type=solid][variant=primary][disabled=""][inverse=true i].gov-badge .element, [type=solid][variant=primary][disabled=""][inverse="1"].gov-badge .element, [type=solid][variant=primary][disabled=true i][inverse=""].gov-badge .element, [type=solid][variant=primary][disabled=true i][inverse=true i].gov-badge .element, [type=solid][variant=primary][disabled=true i][inverse="1"].gov-badge .element, [type=solid][variant=primary][disabled="1"][inverse=""].gov-badge .element, [type=solid][variant=primary][disabled="1"][inverse=true i].gov-badge .element, [type=solid][variant=primary][disabled="1"][inverse="1"].gov-badge .element {
+  color: var(--gov-button-primary-solid-inverse-color, var(--gov-color-primary));
+  opacity: 0.6;
+  background-color: var(--gov-button-primary-solid-inverse-bg, var(--gov-color-secondary-100));
+}
+@media not all and (pointer: coarse) {
+  [type=solid][variant=primary][hoverable].gov-badge .element:hover {
+    background-color: var(--gov-button-primary-solid-hover-bg, var(--gov-color-primary-700));
+    color: var(--gov-button-primary-solid-hover-color, var(--gov-color-secondary-100));
+  }
+  [type=solid][variant=primary][hoverable].gov-badge .element:hover:active {
+    background-color: var(--gov-button-primary-solid-active-bg, var(--gov-color-primary-800));
+  }
+}
+@media not all and (pointer: coarse) {
+  [type=solid][variant=primary][hoverable][inverse=""].gov-badge .element:hover, [type=solid][variant=primary][hoverable][inverse=true i].gov-badge .element:hover, [type=solid][variant=primary][hoverable][inverse="1"].gov-badge .element:hover {
+    background-color: var(--gov-button-primary-solid-inverse-hover-bg, var(--gov-color-secondary-100));
+    color: var(--gov-button-primary-solid-inverse-hover-color, var(--gov-color-primary-700));
+  }
+  [type=solid][variant=primary][hoverable][inverse=""].gov-badge .element:hover:active, [type=solid][variant=primary][hoverable][inverse=true i].gov-badge .element:hover:active, [type=solid][variant=primary][hoverable][inverse="1"].gov-badge .element:hover:active {
+    color: var(--gov-button-primary-solid-inverse-active-color, var(--gov-color-primary-800));
+  }
+}
+[type=outlined][variant=primary].gov-badge .element {
+  color: var(--gov-button-primary-outlined-color, var(--gov-color-primary));
+  border-color: var(--gov-button-primary-outlined-border, var(--gov-color-primary));
+}
+[type=outlined][variant=primary][inverse=""].gov-badge .element, [type=outlined][variant=primary][inverse=true i].gov-badge .element, [type=outlined][variant=primary][inverse="1"].gov-badge .element {
+  color: var(--gov-button-primary-outlined-inverse-color, var(--gov-color-secondary-100));
+  background-color: var(--gov-button-primary-outlined-inverse-bg, transparent);
+  border-color: var(--gov-button-primary-outlined-inverse-border, var(--gov-color-secondary-100));
+}
+[type=outlined][variant=primary][disabled=""].gov-badge .element, [type=outlined][variant=primary][disabled=true i].gov-badge .element, [type=outlined][variant=primary][disabled="1"].gov-badge .element {
+  background-color: var(--gov-button-primary-outlined-disabled-bg, transparent);
+  color: var(--gov-button-primary-outlined-disabled-color, var(--gov-color-primary-400));
+  border-color: var(--gov-button-primary-outlined-disabled-border, var(--gov-color-primary-300));
+}
+[type=outlined][variant=primary][disabled=""][inverse=""].gov-badge .element, [type=outlined][variant=primary][disabled=""][inverse=true i].gov-badge .element, [type=outlined][variant=primary][disabled=""][inverse="1"].gov-badge .element, [type=outlined][variant=primary][disabled=true i][inverse=""].gov-badge .element, [type=outlined][variant=primary][disabled=true i][inverse=true i].gov-badge .element, [type=outlined][variant=primary][disabled=true i][inverse="1"].gov-badge .element, [type=outlined][variant=primary][disabled="1"][inverse=""].gov-badge .element, [type=outlined][variant=primary][disabled="1"][inverse=true i].gov-badge .element, [type=outlined][variant=primary][disabled="1"][inverse="1"].gov-badge .element {
+  color: var(--gov-button-primary-outlined-inverse-color, var(--gov-color-secondary-100));
+  opacity: 0.6;
+  background-color: var(--gov-button-primary-outlined-inverse-bg, transparent);
+}
+@media not all and (pointer: coarse) {
+  [type=outlined][variant=primary][hoverable].gov-badge .element:hover {
+    background-color: var(--gov-button-primary-outlined-hover-bg, var(--gov-color-primary-100));
+    color: var(--gov-button-primary-outlined-hover-color, var(--gov-color-primary));
+  }
+  [type=outlined][variant=primary][hoverable].gov-badge .element:hover:active {
+    background-color: var(--gov-button-primary-outlined-active-bg, var(--gov-color-primary-300));
+  }
+}
+@media not all and (pointer: coarse) {
+  [type=outlined][variant=primary][hoverable][inverse=""].gov-badge .element:hover, [type=outlined][variant=primary][hoverable][inverse=true i].gov-badge .element:hover, [type=outlined][variant=primary][hoverable][inverse="1"].gov-badge .element:hover {
+    background-color: var(--gov-button-primary-outlined-inverse-hover-bg, var(--gov-color-secondary-100));
+    color: var(--gov-button-primary-outlined-inverse-hover-color, var(--gov-color-primary));
+  }
+  [type=outlined][variant=primary][hoverable][inverse=""].gov-badge .element:hover:active, [type=outlined][variant=primary][hoverable][inverse=true i].gov-badge .element:hover:active, [type=outlined][variant=primary][hoverable][inverse="1"].gov-badge .element:hover:active {
+    color: var(--gov-button-primary-outline-inverse-active-color, var(--gov-color-primary-700));
+  }
+}
+[type=base][variant=primary].gov-badge .element {
+  color: var(--gov-button-primary-base-color, var(--gov-color-primary));
+  border-width: 0;
+}
+[type=base][variant=primary][inverse=""].gov-badge .element, [type=base][variant=primary][inverse=true i].gov-badge .element, [type=base][variant=primary][inverse="1"].gov-badge .element {
+  color: var(--gov-button-primary-base-inverse-color, var(--gov-color-secondary-100));
+  background-color: var(--gov-button-primary-base-inverse-bg, transparent);
+}
+[type=base][variant=primary][disabled=""].gov-badge .element, [type=base][variant=primary][disabled=true i].gov-badge .element, [type=base][variant=primary][disabled="1"].gov-badge .element {
+  color: var(--gov-button-primary-base-disabled-color, var(--gov-color-primary-400));
+}
+[type=base][variant=primary][disabled=""][inverse=""].gov-badge .element, [type=base][variant=primary][disabled=""][inverse=true i].gov-badge .element, [type=base][variant=primary][disabled=""][inverse="1"].gov-badge .element, [type=base][variant=primary][disabled=true i][inverse=""].gov-badge .element, [type=base][variant=primary][disabled=true i][inverse=true i].gov-badge .element, [type=base][variant=primary][disabled=true i][inverse="1"].gov-badge .element, [type=base][variant=primary][disabled="1"][inverse=""].gov-badge .element, [type=base][variant=primary][disabled="1"][inverse=true i].gov-badge .element, [type=base][variant=primary][disabled="1"][inverse="1"].gov-badge .element {
+  color: var(--gov-button-primary-base-inverse-color, var(--gov-color-secondary-100));
+  opacity: 0.6;
+  background-color: var(--gov-button-primary-base-inverse-bg, transparent);
+}
+@media not all and (pointer: coarse) {
+  [type=base][variant=primary][hoverable].gov-badge .element:hover {
+    background-color: var(--gov-button-primary-base-hover-bg, var(--gov-color-primary-100));
+    color: var(--gov-button-primary-base-hover-color, var(--gov-color-primary));
+  }
+  [type=base][variant=primary][hoverable].gov-badge .element:hover:active {
+    background-color: var(--gov-button-primary-base-active-bg, var(--gov-color-primary-300));
+  }
+}
+@media not all and (pointer: coarse) {
+  [type=base][variant=primary][hoverable][inverse=""].gov-badge .element:hover, [type=base][variant=primary][hoverable][inverse=true i].gov-badge .element:hover, [type=base][variant=primary][hoverable][inverse="1"].gov-badge .element:hover {
+    background-color: var(--gov-button-primary-base-inverse-hover-bg, transparent);
+    color: var(--gov-button-primary-base-inverse-hover-color, var(--gov-color-primary-200));
+  }
+  [type=base][variant=primary][hoverable][inverse=""].gov-badge .element:hover:active, [type=base][variant=primary][hoverable][inverse=true i].gov-badge .element:hover:active, [type=base][variant=primary][hoverable][inverse="1"].gov-badge .element:hover:active {
+    color: var(--gov-button-primary-base-inverse-active-color, var(--gov-color-primary-300));
+  }
+}
+[type=solid][variant=secondary].gov-badge .element {
+  background-color: var(--gov-button-secondary-solid-bg, var(--gov-color-secondary));
+  color: var(--gov-button-secondary-solid-color, var(--gov-color-secondary-100));
+  border-width: 0;
+}
+[type=solid][variant=secondary][inverse=""].gov-badge .element, [type=solid][variant=secondary][inverse=true i].gov-badge .element, [type=solid][variant=secondary][inverse="1"].gov-badge .element {
+  color: var(--gov-button-secondary-solid-inverse-color, var(--gov-color-secondary));
+  background-color: var(--gov-button-secondary-solid-inverse-bg, var(--gov-color-secondary-100));
+}
+[type=solid][variant=secondary][disabled=""].gov-badge .element, [type=solid][variant=secondary][disabled=true i].gov-badge .element, [type=solid][variant=secondary][disabled="1"].gov-badge .element {
+  background-color: var(--gov-button-secondary-solid-disabled-bg, var(--gov-color-secondary-300));
+  color: var(--gov-button-secondary-solid-disabled-color, var(--gov-color-secondary-600));
+}
+[type=solid][variant=secondary][disabled=""][inverse=""].gov-badge .element, [type=solid][variant=secondary][disabled=""][inverse=true i].gov-badge .element, [type=solid][variant=secondary][disabled=""][inverse="1"].gov-badge .element, [type=solid][variant=secondary][disabled=true i][inverse=""].gov-badge .element, [type=solid][variant=secondary][disabled=true i][inverse=true i].gov-badge .element, [type=solid][variant=secondary][disabled=true i][inverse="1"].gov-badge .element, [type=solid][variant=secondary][disabled="1"][inverse=""].gov-badge .element, [type=solid][variant=secondary][disabled="1"][inverse=true i].gov-badge .element, [type=solid][variant=secondary][disabled="1"][inverse="1"].gov-badge .element {
+  color: var(--gov-button-secondary-solid-inverse-color, var(--gov-color-secondary));
+  opacity: 0.6;
+  background-color: var(--gov-button-secondary-solid-inverse-bg, var(--gov-color-secondary-100));
+}
+@media not all and (pointer: coarse) {
+  [type=solid][variant=secondary][hoverable].gov-badge .element:hover {
+    background-color: var(--gov-button-secondary-solid-hover-bg, var(--gov-color-secondary-900));
+    color: var(--gov-button-secondary-solid-hover-color, var(--gov-color-secondary-100));
+  }
+  [type=solid][variant=secondary][hoverable].gov-badge .element:hover:active {
+    background-color: var(--gov-button-secondary-solid-active-bg, var(--gov-color-secondary));
+  }
+}
+@media not all and (pointer: coarse) {
+  [type=solid][variant=secondary][hoverable][inverse=""].gov-badge .element:hover, [type=solid][variant=secondary][hoverable][inverse=true i].gov-badge .element:hover, [type=solid][variant=secondary][hoverable][inverse="1"].gov-badge .element:hover {
+    background-color: var(--gov-button-secondary-solid-inverse-hover-bg, var(--gov-color-secondary-100));
+    color: var(--gov-button-secondary-solid-inverse-hover-color, var(--gov-color-secondary-900));
+  }
+  [type=solid][variant=secondary][hoverable][inverse=""].gov-badge .element:hover:active, [type=solid][variant=secondary][hoverable][inverse=true i].gov-badge .element:hover:active, [type=solid][variant=secondary][hoverable][inverse="1"].gov-badge .element:hover:active {
+    color: var(--gov-button-secondary-solid-inverse-active-color, var(--gov-color-secondary));
+  }
+}
+[type=outlined][variant=secondary].gov-badge .element {
+  color: var(--gov-button-secondary-outlined-color, var(--gov-color-secondary));
+  border-color: var(--gov-button-secondary-outlined-border, var(--gov-color-secondary));
+}
+[type=outlined][variant=secondary][inverse=""].gov-badge .element, [type=outlined][variant=secondary][inverse=true i].gov-badge .element, [type=outlined][variant=secondary][inverse="1"].gov-badge .element {
+  color: var(--gov-button-secondary-outlined-inverse-color, var(--gov-color-secondary-100));
+  background-color: var(--gov-button-secondary-outlined-inverse-bg, transparent);
+  border-color: var(--gov-button-secondary-outlined-inverse-border, var(--gov-color-secondary-100));
+}
+[type=outlined][variant=secondary][disabled=""].gov-badge .element, [type=outlined][variant=secondary][disabled=true i].gov-badge .element, [type=outlined][variant=secondary][disabled="1"].gov-badge .element {
+  background-color: var(--gov-button-secondary-outlined-disabled-bg, transparent);
+  color: var(--gov-button-secondary-outlined-disabled-color, var(--gov-color-secondary-500));
+  border-color: var(--gov-button-secondary-outlined-disabled-border, var(--gov-color-secondary-500));
+}
+[type=outlined][variant=secondary][disabled=""][inverse=""].gov-badge .element, [type=outlined][variant=secondary][disabled=""][inverse=true i].gov-badge .element, [type=outlined][variant=secondary][disabled=""][inverse="1"].gov-badge .element, [type=outlined][variant=secondary][disabled=true i][inverse=""].gov-badge .element, [type=outlined][variant=secondary][disabled=true i][inverse=true i].gov-badge .element, [type=outlined][variant=secondary][disabled=true i][inverse="1"].gov-badge .element, [type=outlined][variant=secondary][disabled="1"][inverse=""].gov-badge .element, [type=outlined][variant=secondary][disabled="1"][inverse=true i].gov-badge .element, [type=outlined][variant=secondary][disabled="1"][inverse="1"].gov-badge .element {
+  color: var(--gov-button-secondary-outlined-inverse-color, var(--gov-color-secondary-100));
+  opacity: 0.6;
+  background-color: var(--gov-button-secondary-outlined-inverse-bg, transparent);
+}
+@media not all and (pointer: coarse) {
+  [type=outlined][variant=secondary][hoverable].gov-badge .element:hover {
+    background-color: var(--gov-button-secondary-outlined-hover-bg, var(--gov-color-secondary-300));
+    color: var(--gov-button-secondary-outlined-hover-color, var(--gov-color-secondary));
+  }
+  [type=outlined][variant=secondary][hoverable].gov-badge .element:hover:active {
+    background-color: var(--gov-button-secondary-outlined-active-bg, var(--gov-color-secondary-400));
+  }
+}
+@media not all and (pointer: coarse) {
+  [type=outlined][variant=secondary][hoverable][inverse=""].gov-badge .element:hover, [type=outlined][variant=secondary][hoverable][inverse=true i].gov-badge .element:hover, [type=outlined][variant=secondary][hoverable][inverse="1"].gov-badge .element:hover {
+    background-color: var(--gov-button-secondary-outlined-inverse-hover-bg, var(--gov-color-secondary-100));
+    color: var(--gov-button-secondary-outlined-inverse-hover-color, var(--gov-color-secondary));
+  }
+  [type=outlined][variant=secondary][hoverable][inverse=""].gov-badge .element:hover:active, [type=outlined][variant=secondary][hoverable][inverse=true i].gov-badge .element:hover:active, [type=outlined][variant=secondary][hoverable][inverse="1"].gov-badge .element:hover:active {
+    color: var(--gov-button-secondary-outline-inverse-active-color, var(--gov-color-secondary-900));
+  }
+}
+[type=base][variant=secondary].gov-badge .element {
+  color: var(--gov-button-secondary-outlined-color, var(--gov-color-secondary));
+  border-width: 0;
+}
+[type=base][variant=secondary][inverse=""].gov-badge .element, [type=base][variant=secondary][inverse=true i].gov-badge .element, [type=base][variant=secondary][inverse="1"].gov-badge .element {
+  color: var(--gov-button-secondary-base-inverse-color, var(--gov-color-secondary-100));
+  background-color: var(--gov-button-secondary-base-inverse-bg, transparent);
+}
+[type=base][variant=secondary][disabled=""].gov-badge .element, [type=base][variant=secondary][disabled=true i].gov-badge .element, [type=base][variant=secondary][disabled="1"].gov-badge .element {
+  color: var(--gov-button-secondary-outlined-disabled-color, var(--gov-color-secondary-600));
+}
+[type=base][variant=secondary][disabled=""][inverse=""].gov-badge .element, [type=base][variant=secondary][disabled=""][inverse=true i].gov-badge .element, [type=base][variant=secondary][disabled=""][inverse="1"].gov-badge .element, [type=base][variant=secondary][disabled=true i][inverse=""].gov-badge .element, [type=base][variant=secondary][disabled=true i][inverse=true i].gov-badge .element, [type=base][variant=secondary][disabled=true i][inverse="1"].gov-badge .element, [type=base][variant=secondary][disabled="1"][inverse=""].gov-badge .element, [type=base][variant=secondary][disabled="1"][inverse=true i].gov-badge .element, [type=base][variant=secondary][disabled="1"][inverse="1"].gov-badge .element {
+  color: var(--gov-button-secondary-base-inverse-color, var(--gov-color-secondary-100));
+  opacity: 0.6;
+  background-color: var(--gov-button-secondary-base-inverse-bg, transparent);
+}
+@media not all and (pointer: coarse) {
+  [type=base][variant=secondary][hoverable].gov-badge .element:hover {
+    background-color: var(--gov-button-secondary-outlined-hover-bg, var(--gov-color-secondary-300));
+    color: var(--gov-button-secondary-outlined-hover-color, var(--gov-color-secondary));
+  }
+  [type=base][variant=secondary][hoverable].gov-badge .element:hover:active {
+    background-color: var(--gov-button-secondary-outlined-active-bg, var(--gov-color-secondary-400));
+  }
+}
+@media not all and (pointer: coarse) {
+  [type=base][variant=secondary][hoverable][inverse=""].gov-badge .element:hover, [type=base][variant=secondary][hoverable][inverse=true i].gov-badge .element:hover, [type=base][variant=secondary][hoverable][inverse="1"].gov-badge .element:hover {
+    background-color: var(--gov-button-secondary-base-inverse-hover-bg, transparent);
+    color: var(--gov-button-secondary-base-inverse-hover-color, var(--gov-color-secondary-500));
+  }
+  [type=base][variant=secondary][hoverable][inverse=""].gov-badge .element:hover:active, [type=base][variant=secondary][hoverable][inverse=true i].gov-badge .element:hover:active, [type=base][variant=secondary][hoverable][inverse="1"].gov-badge .element:hover:active {
+    color: var(--gov-button-secondary-base-inverse-active-color, var(--gov-color-secondary-600));
+  }
+}
+[type=solid][variant=error].gov-badge .element {
+  background-color: var(--gov-button-error-solid-bg, var(--gov-color-error));
+  color: var(--gov-button-error-solid-color, var(--gov-color-secondary-100));
+  border-width: 0;
+}
+[type=solid][variant=error][inverse=""].gov-badge .element, [type=solid][variant=error][inverse=true i].gov-badge .element, [type=solid][variant=error][inverse="1"].gov-badge .element {
+  color: var(--gov-button-error-solid-inverse-color, var(--gov-color-error));
+  background-color: var(--gov-button-error-solid-inverse-bg, var(--gov-color-secondary-100));
+}
+[type=solid][variant=error][disabled=""].gov-badge .element, [type=solid][variant=error][disabled=true i].gov-badge .element, [type=solid][variant=error][disabled="1"].gov-badge .element {
+  background-color: var(--gov-button-error-solid-disabled-bg, var(--gov-color-error-200));
+  color: var(--gov-button-error-solid-disabled-color, var(--gov-color-secondary-100));
+}
+[type=solid][variant=error][disabled=""][inverse=""].gov-badge .element, [type=solid][variant=error][disabled=""][inverse=true i].gov-badge .element, [type=solid][variant=error][disabled=""][inverse="1"].gov-badge .element, [type=solid][variant=error][disabled=true i][inverse=""].gov-badge .element, [type=solid][variant=error][disabled=true i][inverse=true i].gov-badge .element, [type=solid][variant=error][disabled=true i][inverse="1"].gov-badge .element, [type=solid][variant=error][disabled="1"][inverse=""].gov-badge .element, [type=solid][variant=error][disabled="1"][inverse=true i].gov-badge .element, [type=solid][variant=error][disabled="1"][inverse="1"].gov-badge .element {
+  color: var(--gov-button-error-solid-inverse-color, var(--gov-color-error));
+  opacity: 0.6;
+  background-color: var(--gov-button-error-solid-inverse-bg, var(--gov-color-secondary-100));
+}
+@media not all and (pointer: coarse) {
+  [type=solid][variant=error][hoverable].gov-badge .element:hover {
+    background-color: var(--gov-button-error-solid-hover-bg, var(--gov-color-error-500));
+    color: var(--gov-button-error-solid-hover-color, var(--gov-color-secondary-100));
+  }
+  [type=solid][variant=error][hoverable].gov-badge .element:hover:active {
+    background-color: var(--gov-button-error-solid-active-bg, var(--gov-color-error-600));
+  }
+}
+@media not all and (pointer: coarse) {
+  [type=solid][variant=error][hoverable][inverse=""].gov-badge .element:hover, [type=solid][variant=error][hoverable][inverse=true i].gov-badge .element:hover, [type=solid][variant=error][hoverable][inverse="1"].gov-badge .element:hover {
+    background-color: var(--gov-button-error-solid-inverse-hover-bg, var(--gov-color-secondary-100));
+    color: var(--gov-button-error-solid-inverse-hover-color, var(--gov-color-error-500));
+  }
+  [type=solid][variant=error][hoverable][inverse=""].gov-badge .element:hover:active, [type=solid][variant=error][hoverable][inverse=true i].gov-badge .element:hover:active, [type=solid][variant=error][hoverable][inverse="1"].gov-badge .element:hover:active {
+    color: var(--gov-button-error-solid-inverse-active-color, var(--gov-color-error-600));
+  }
+}
+[type=outlined][variant=error].gov-badge .element {
+  color: var(--gov-button-error-outlined-color, var(--gov-color-error));
+  border-color: var(--gov-button-error-outlined-border, var(--gov-color-error));
+}
+[type=outlined][variant=error][inverse=""].gov-badge .element, [type=outlined][variant=error][inverse=true i].gov-badge .element, [type=outlined][variant=error][inverse="1"].gov-badge .element {
+  color: var(--gov-button-error-outlined-inverse-color, var(--gov-color-secondary-100));
+  background-color: var(--gov-button-error-outlined-inverse-bg, transparent);
+  border-color: var(--gov-button-error-outlined-inverse-border, var(--gov-color-secondary-100));
+}
+[type=outlined][variant=error][disabled=""].gov-badge .element, [type=outlined][variant=error][disabled=true i].gov-badge .element, [type=outlined][variant=error][disabled="1"].gov-badge .element {
+  background-color: var(--gov-button-error-outlined-disabled-bg, transparent);
+  color: var(--gov-button-error-outlined-disabled-color, var(--gov-color-error-200));
+  border-color: var(--gov-button-error-outlined-disabled-border, var(--gov-color-error-200));
+}
+[type=outlined][variant=error][disabled=""][inverse=""].gov-badge .element, [type=outlined][variant=error][disabled=""][inverse=true i].gov-badge .element, [type=outlined][variant=error][disabled=""][inverse="1"].gov-badge .element, [type=outlined][variant=error][disabled=true i][inverse=""].gov-badge .element, [type=outlined][variant=error][disabled=true i][inverse=true i].gov-badge .element, [type=outlined][variant=error][disabled=true i][inverse="1"].gov-badge .element, [type=outlined][variant=error][disabled="1"][inverse=""].gov-badge .element, [type=outlined][variant=error][disabled="1"][inverse=true i].gov-badge .element, [type=outlined][variant=error][disabled="1"][inverse="1"].gov-badge .element {
+  color: var(--gov-button-error-outlined-inverse-color, var(--gov-color-secondary-100));
+  opacity: 0.6;
+  background-color: var(--gov-button-error-outlined-inverse-bg, transparent);
+}
+@media not all and (pointer: coarse) {
+  [type=outlined][variant=error][hoverable].gov-badge .element:hover {
+    background-color: var(--gov-button-error-outlined-hover-bg, var(--gov-color-error-100));
+    color: var(--gov-button-error-outlined-hover-color, var(--gov-color-error));
+  }
+  [type=outlined][variant=error][hoverable].gov-badge .element:hover:active {
+    background-color: var(--gov-button-error-outlined-active-bg, var(--gov-color-error-200));
+  }
+}
+@media not all and (pointer: coarse) {
+  [type=outlined][variant=error][hoverable][inverse=""].gov-badge .element:hover, [type=outlined][variant=error][hoverable][inverse=true i].gov-badge .element:hover, [type=outlined][variant=error][hoverable][inverse="1"].gov-badge .element:hover {
+    background-color: var(--gov-button-error-outlined-inverse-hover-bg, var(--gov-color-secondary-100));
+    color: var(--gov-button-error-outlined-inverse-hover-color, var(--gov-color-error));
+  }
+  [type=outlined][variant=error][hoverable][inverse=""].gov-badge .element:hover:active, [type=outlined][variant=error][hoverable][inverse=true i].gov-badge .element:hover:active, [type=outlined][variant=error][hoverable][inverse="1"].gov-badge .element:hover:active {
+    color: var(--gov-button-error-outlined-inverse-active-color, var(--gov-color-error-500));
+  }
+}
+[type=base][variant=error].gov-badge .element {
+  color: var(--gov-button-error-outlined-color, var(--gov-color-error));
+  border-width: 0;
+}
+[type=base][variant=error][inverse=""].gov-badge .element, [type=base][variant=error][inverse=true i].gov-badge .element, [type=base][variant=error][inverse="1"].gov-badge .element {
+  color: var(--gov-button-error-base-inverse-color, var(--gov-color-secondary-100));
+  background-color: var(--gov-button-error-base-inverse-bg, transparent);
+}
+[type=base][variant=error][disabled=""].gov-badge .element, [type=base][variant=error][disabled=true i].gov-badge .element, [type=base][variant=error][disabled="1"].gov-badge .element {
+  color: var(--gov-button-error-outlined-disabled-color, var(--gov-color-error-200));
+}
+[type=base][variant=error][disabled=""][inverse=""].gov-badge .element, [type=base][variant=error][disabled=""][inverse=true i].gov-badge .element, [type=base][variant=error][disabled=""][inverse="1"].gov-badge .element, [type=base][variant=error][disabled=true i][inverse=""].gov-badge .element, [type=base][variant=error][disabled=true i][inverse=true i].gov-badge .element, [type=base][variant=error][disabled=true i][inverse="1"].gov-badge .element, [type=base][variant=error][disabled="1"][inverse=""].gov-badge .element, [type=base][variant=error][disabled="1"][inverse=true i].gov-badge .element, [type=base][variant=error][disabled="1"][inverse="1"].gov-badge .element {
+  color: var(--gov-button-error-base-inverse-color, var(--gov-color-secondary-100));
+  opacity: 0.6;
+  background-color: var(--gov-button-error-base-inverse-bg, transparent);
+}
+@media not all and (pointer: coarse) {
+  [type=base][variant=error][hoverable].gov-badge .element:hover {
+    background-color: var(--gov-button-error-outlined-hover-bg, var(--gov-color-error-100));
+    color: var(--gov-button-error-outlined-hover-color, var(--gov-color-error));
+  }
+  [type=base][variant=error][hoverable].gov-badge .element:hover:active {
+    background-color: var(--gov-button-error-outlined-active-bg, var(--gov-color-error-200));
+  }
+}
+@media not all and (pointer: coarse) {
+  [type=base][variant=error][hoverable][inverse=""].gov-badge .element:hover, [type=base][variant=error][hoverable][inverse=true i].gov-badge .element:hover, [type=base][variant=error][hoverable][inverse="1"].gov-badge .element:hover {
+    background-color: var(--gov-button-error-base-inverse-hover-bg, transparent);
+    color: var(--gov-button-error-base-inverse-hover-color, var(--gov-color-error-200));
+  }
+  [type=base][variant=error][hoverable][inverse=""].gov-badge .element:hover:active, [type=base][variant=error][hoverable][inverse=true i].gov-badge .element:hover:active, [type=base][variant=error][hoverable][inverse="1"].gov-badge .element:hover:active {
+    color: var(--gov-button-error-base-inverse-active-color, var(--gov-color-error-300));
+  }
+}
+[type=solid][variant=success].gov-badge .element {
+  background-color: var(--gov-button-success-solid-bg, var(--gov-color-success-500));
+  color: var(--gov-button-success-solid-color, var(--gov-color-secondary-100));
+  border-width: 0;
+}
+[type=solid][variant=success][inverse=""].gov-badge .element, [type=solid][variant=success][inverse=true i].gov-badge .element, [type=solid][variant=success][inverse="1"].gov-badge .element {
+  color: var(--gov-button-success-solid-inverse-color, var(--gov-color-success-500));
+  background-color: var(--gov-button-success-solid-inverse-bg, var(--gov-color-secondary-100));
+}
+[type=solid][variant=success][disabled=""].gov-badge .element, [type=solid][variant=success][disabled=true i].gov-badge .element, [type=solid][variant=success][disabled="1"].gov-badge .element {
+  background-color: var(--gov-button-success-solid-disabled-bg, var(--gov-color-success-200));
+  color: var(--gov-button-success-solid-disabled-color, var(--gov-color-secondary-100));
+}
+[type=solid][variant=success][disabled=""][inverse=""].gov-badge .element, [type=solid][variant=success][disabled=""][inverse=true i].gov-badge .element, [type=solid][variant=success][disabled=""][inverse="1"].gov-badge .element, [type=solid][variant=success][disabled=true i][inverse=""].gov-badge .element, [type=solid][variant=success][disabled=true i][inverse=true i].gov-badge .element, [type=solid][variant=success][disabled=true i][inverse="1"].gov-badge .element, [type=solid][variant=success][disabled="1"][inverse=""].gov-badge .element, [type=solid][variant=success][disabled="1"][inverse=true i].gov-badge .element, [type=solid][variant=success][disabled="1"][inverse="1"].gov-badge .element {
+  color: var(--gov-button-success-solid-inverse-color, var(--gov-color-success-500));
+  opacity: 0.6;
+  background-color: var(--gov-button-success-solid-inverse-bg, var(--gov-color-secondary-100));
+}
+@media not all and (pointer: coarse) {
+  [type=solid][variant=success][hoverable].gov-badge .element:hover {
+    background-color: var(--gov-button-success-solid-hover-bg, var(--gov-color-success-600));
+    color: var(--gov-button-success-solid-hover-color, var(--gov-color-secondary-100));
+  }
+  [type=solid][variant=success][hoverable].gov-badge .element:hover:active {
+    background-color: var(--gov-button-success-solid-active-bg, var(--gov-color-success-700));
+  }
+}
+@media not all and (pointer: coarse) {
+  [type=solid][variant=success][hoverable][inverse=""].gov-badge .element:hover, [type=solid][variant=success][hoverable][inverse=true i].gov-badge .element:hover, [type=solid][variant=success][hoverable][inverse="1"].gov-badge .element:hover {
+    background-color: var(--gov-button-success-solid-inverse-hover-bg, var(--gov-color-secondary-100));
+    color: var(--gov-button-success-solid-inverse-hover-color, var(--gov-color-success-600));
+  }
+  [type=solid][variant=success][hoverable][inverse=""].gov-badge .element:hover:active, [type=solid][variant=success][hoverable][inverse=true i].gov-badge .element:hover:active, [type=solid][variant=success][hoverable][inverse="1"].gov-badge .element:hover:active {
+    color: var(--gov-button-success-solid-inverse-active-color, var(--gov-color-success-700));
+  }
+}
+[type=outlined][variant=success].gov-badge .element {
+  color: var(--gov-button-success-outlined-color, var(--gov-color-success-500));
+  border-color: var(--gov-button-success-outlined-border, var(--gov-color-success-500));
+}
+[type=outlined][variant=success][inverse=""].gov-badge .element, [type=outlined][variant=success][inverse=true i].gov-badge .element, [type=outlined][variant=success][inverse="1"].gov-badge .element {
+  color: var(--gov-button-success-outlined-inverse-color, var(--gov-color-secondary-100));
+  background-color: var(--gov-button-success-outlined-inverse-bg, transparent);
+  border-color: var(--gov-button-success-outlined-inverse-border, var(--gov-color-secondary-100));
+}
+[type=outlined][variant=success][disabled=""].gov-badge .element, [type=outlined][variant=success][disabled=true i].gov-badge .element, [type=outlined][variant=success][disabled="1"].gov-badge .element {
+  background-color: var(--gov-button-success-outlined-disabled-bg, transparent);
+  color: var(--gov-button-success-outlined-disabled-color, var(--gov-color-success-300));
+  border-color: var(--gov-button-success-outlined-disabled-border, var(--gov-color-success-300));
+}
+[type=outlined][variant=success][disabled=""][inverse=""].gov-badge .element, [type=outlined][variant=success][disabled=""][inverse=true i].gov-badge .element, [type=outlined][variant=success][disabled=""][inverse="1"].gov-badge .element, [type=outlined][variant=success][disabled=true i][inverse=""].gov-badge .element, [type=outlined][variant=success][disabled=true i][inverse=true i].gov-badge .element, [type=outlined][variant=success][disabled=true i][inverse="1"].gov-badge .element, [type=outlined][variant=success][disabled="1"][inverse=""].gov-badge .element, [type=outlined][variant=success][disabled="1"][inverse=true i].gov-badge .element, [type=outlined][variant=success][disabled="1"][inverse="1"].gov-badge .element {
+  color: var(--gov-button-success-outlined-inverse-color, var(--gov-color-secondary-100));
+  opacity: 0.6;
+  background-color: var(--gov-button-success-outlined-inverse-bg, transparent);
+}
+@media not all and (pointer: coarse) {
+  [type=outlined][variant=success][hoverable].gov-badge .element:hover {
+    background-color: var(--gov-button-success-outlined-hover-bg, var(--gov-color-success-100));
+    color: var(--gov-button-success-outlined-hover-color, var(--gov-color-success-500));
+  }
+  [type=outlined][variant=success][hoverable].gov-badge .element:hover:active {
+    background-color: var(--gov-button-success-outlined-active-bg, var(--gov-color-success-200));
+  }
+}
+@media not all and (pointer: coarse) {
+  [type=outlined][variant=success][hoverable][inverse=""].gov-badge .element:hover, [type=outlined][variant=success][hoverable][inverse=true i].gov-badge .element:hover, [type=outlined][variant=success][hoverable][inverse="1"].gov-badge .element:hover {
+    background-color: var(--gov-button-success-outlined-inverse-hover-bg, var(--gov-color-secondary-100));
+    color: var(--gov-button-success-outlined-inverse-hover-color, var(--gov-color-success-500));
+  }
+  [type=outlined][variant=success][hoverable][inverse=""].gov-badge .element:hover:active, [type=outlined][variant=success][hoverable][inverse=true i].gov-badge .element:hover:active, [type=outlined][variant=success][hoverable][inverse="1"].gov-badge .element:hover:active {
+    color: var(--gov-button-success-outlined-inverse-active-color, var(--gov-color-success-600));
+  }
+}
+[type=base][variant=success].gov-badge .element {
+  color: var(--gov-button-success-outlined-color, var(--gov-color-success-500));
+  border-width: 0;
+}
+[type=base][variant=success][inverse=""].gov-badge .element, [type=base][variant=success][inverse=true i].gov-badge .element, [type=base][variant=success][inverse="1"].gov-badge .element {
+  color: var(--gov-button-success-base-inverse-color, var(--gov-color-secondary-100));
+  background-color: var(--gov-button-success-base-inverse-bg, transparent);
+}
+[type=base][variant=success][disabled=""].gov-badge .element, [type=base][variant=success][disabled=true i].gov-badge .element, [type=base][variant=success][disabled="1"].gov-badge .element {
+  color: var(--gov-button-success-outlined-disabled-color, var(--gov-color-success-300));
+}
+[type=base][variant=success][disabled=""][inverse=""].gov-badge .element, [type=base][variant=success][disabled=""][inverse=true i].gov-badge .element, [type=base][variant=success][disabled=""][inverse="1"].gov-badge .element, [type=base][variant=success][disabled=true i][inverse=""].gov-badge .element, [type=base][variant=success][disabled=true i][inverse=true i].gov-badge .element, [type=base][variant=success][disabled=true i][inverse="1"].gov-badge .element, [type=base][variant=success][disabled="1"][inverse=""].gov-badge .element, [type=base][variant=success][disabled="1"][inverse=true i].gov-badge .element, [type=base][variant=success][disabled="1"][inverse="1"].gov-badge .element {
+  color: var(--gov-button-success-base-inverse-color, var(--gov-color-secondary-100));
+  opacity: 0.6;
+  background-color: var(--gov-button-success-base-inverse-bg, transparent);
+}
+@media not all and (pointer: coarse) {
+  [type=base][variant=success][hoverable].gov-badge .element:hover {
+    background-color: var(--gov-button-success-outlined-hover-bg, var(--gov-color-success-100));
+    color: var(--gov-button-success-outlined-hover-color, var(--gov-color-success-500));
+  }
+  [type=base][variant=success][hoverable].gov-badge .element:hover:active {
+    background-color: var(--gov-button-success-outlined-active-bg, var(--gov-color-success-200));
+  }
+}
+@media not all and (pointer: coarse) {
+  [type=base][variant=success][hoverable][inverse=""].gov-badge .element:hover, [type=base][variant=success][hoverable][inverse=true i].gov-badge .element:hover, [type=base][variant=success][hoverable][inverse="1"].gov-badge .element:hover {
+    background-color: var(--gov-button-success-base-inverse-hover-bg, transparent);
+    color: var(--gov-button-success-base-inverse-hover-color, var(--gov-color-success-200));
+  }
+  [type=base][variant=success][hoverable][inverse=""].gov-badge .element:hover:active, [type=base][variant=success][hoverable][inverse=true i].gov-badge .element:hover:active, [type=base][variant=success][hoverable][inverse="1"].gov-badge .element:hover:active {
+    color: var(--gov-button-success-base-inverse-active-color, var(--gov-color-success-300));
+  }
+}
+[type=solid][variant=warning].gov-badge .element {
+  background-color: var(--gov-button-warning-solid-bg, var(--gov-color-warning-500));
+  color: var(--gov-button-warning-solid-color, var(--gov-color-secondary-100));
+  border-width: 0;
+}
+[type=solid][variant=warning][inverse=""].gov-badge .element, [type=solid][variant=warning][inverse=true i].gov-badge .element, [type=solid][variant=warning][inverse="1"].gov-badge .element {
+  color: var(--gov-button-warning-solid-inverse-color, var(--gov-color-warning-500));
+  background-color: var(--gov-button-warning-solid-inverse-bg, var(--gov-color-secondary-100));
+}
+[type=solid][variant=warning][disabled=""].gov-badge .element, [type=solid][variant=warning][disabled=true i].gov-badge .element, [type=solid][variant=warning][disabled="1"].gov-badge .element {
+  background-color: var(--gov-button-warning-solid-disabled-bg, var(--gov-color-warning-200));
+  color: var(--gov-button-warning-solid-disabled-color, var(--gov-color-secondary-100));
+}
+[type=solid][variant=warning][disabled=""][inverse=""].gov-badge .element, [type=solid][variant=warning][disabled=""][inverse=true i].gov-badge .element, [type=solid][variant=warning][disabled=""][inverse="1"].gov-badge .element, [type=solid][variant=warning][disabled=true i][inverse=""].gov-badge .element, [type=solid][variant=warning][disabled=true i][inverse=true i].gov-badge .element, [type=solid][variant=warning][disabled=true i][inverse="1"].gov-badge .element, [type=solid][variant=warning][disabled="1"][inverse=""].gov-badge .element, [type=solid][variant=warning][disabled="1"][inverse=true i].gov-badge .element, [type=solid][variant=warning][disabled="1"][inverse="1"].gov-badge .element {
+  color: var(--gov-button-warning-solid-inverse-color, var(--gov-color-warning-500));
+  opacity: 0.6;
+  background-color: var(--gov-button-warning-solid-inverse-bg, var(--gov-color-secondary-100));
+}
+@media not all and (pointer: coarse) {
+  [type=solid][variant=warning][hoverable].gov-badge .element:hover {
+    background-color: var(--gov-button-warning-solid-hover-bg, var(--gov-color-warning-600));
+    color: var(--gov-button-warning-solid-hover-color, var(--gov-color-secondary-100));
+  }
+  [type=solid][variant=warning][hoverable].gov-badge .element:hover:active {
+    background-color: var(--gov-button-warning-solid-active-bg, var(--gov-color-warning-700));
+  }
+}
+@media not all and (pointer: coarse) {
+  [type=solid][variant=warning][hoverable][inverse=""].gov-badge .element:hover, [type=solid][variant=warning][hoverable][inverse=true i].gov-badge .element:hover, [type=solid][variant=warning][hoverable][inverse="1"].gov-badge .element:hover {
+    background-color: var(--gov-button-warning-solid-inverse-hover-bg, var(--gov-color-secondary-100));
+    color: var(--gov-button-warning-solid-inverse-hover-color, var(--gov-color-warning-600));
+  }
+  [type=solid][variant=warning][hoverable][inverse=""].gov-badge .element:hover:active, [type=solid][variant=warning][hoverable][inverse=true i].gov-badge .element:hover:active, [type=solid][variant=warning][hoverable][inverse="1"].gov-badge .element:hover:active {
+    color: var(--gov-button-warning-solid-inverse-active-color, var(--gov-color-warning-700));
+  }
+}
+[type=outlined][variant=warning].gov-badge .element {
+  color: var(--gov-button-warning-outlined-color, var(--gov-color-warning-500));
+  border-color: var(--gov-button-warning-outlined-border, var(--gov-color-warning-500));
+}
+[type=outlined][variant=warning][inverse=""].gov-badge .element, [type=outlined][variant=warning][inverse=true i].gov-badge .element, [type=outlined][variant=warning][inverse="1"].gov-badge .element {
+  color: var(--gov-button-warning-outlined-inverse-color, var(--gov-color-secondary-100));
+  background-color: var(--gov-button-warning-outlined-inverse-bg, transparent);
+  border-color: var(--gov-button-warning-outlined-inverse-border, var(--gov-color-secondary-100));
+}
+[type=outlined][variant=warning][disabled=""].gov-badge .element, [type=outlined][variant=warning][disabled=true i].gov-badge .element, [type=outlined][variant=warning][disabled="1"].gov-badge .element {
+  background-color: var(--gov-button-warning-outlined-disabled-bg, transparent);
+  color: var(--gov-button-warning-outlined-disabled-color, var(--gov-color-warning));
+  border-color: var(--gov-button-warning-outlined-disabled-border, var(--gov-color-warning));
+}
+[type=outlined][variant=warning][disabled=""][inverse=""].gov-badge .element, [type=outlined][variant=warning][disabled=""][inverse=true i].gov-badge .element, [type=outlined][variant=warning][disabled=""][inverse="1"].gov-badge .element, [type=outlined][variant=warning][disabled=true i][inverse=""].gov-badge .element, [type=outlined][variant=warning][disabled=true i][inverse=true i].gov-badge .element, [type=outlined][variant=warning][disabled=true i][inverse="1"].gov-badge .element, [type=outlined][variant=warning][disabled="1"][inverse=""].gov-badge .element, [type=outlined][variant=warning][disabled="1"][inverse=true i].gov-badge .element, [type=outlined][variant=warning][disabled="1"][inverse="1"].gov-badge .element {
+  color: var(--gov-button-warning-outlined-inverse-color, var(--gov-color-secondary-100));
+  opacity: 0.6;
+  background-color: var(--gov-button-warning-outlined-inverse-bg, transparent);
+}
+@media not all and (pointer: coarse) {
+  [type=outlined][variant=warning][hoverable].gov-badge .element:hover {
+    background-color: var(--gov-button-warning-outlined-hover-bg, var(--gov-color-warning-200));
+    color: var(--gov-button-warning-outlined-hover-color, var(--gov-color-warning-500));
+  }
+  [type=outlined][variant=warning][hoverable].gov-badge .element:hover:active {
+    background-color: var(--gov-button-warning-outlined-active-bg, var(--gov-color-warning-300));
+  }
+}
+@media not all and (pointer: coarse) {
+  [type=outlined][variant=warning][hoverable][inverse=""].gov-badge .element:hover, [type=outlined][variant=warning][hoverable][inverse=true i].gov-badge .element:hover, [type=outlined][variant=warning][hoverable][inverse="1"].gov-badge .element:hover {
+    background-color: var(--gov-button-warning-outlined-inverse-hover-bg, var(--gov-color-secondary-100));
+    color: var(--gov-button-warning-outlined-inverse-hover-color, var(--gov-color-warning-500));
+  }
+  [type=outlined][variant=warning][hoverable][inverse=""].gov-badge .element:hover:active, [type=outlined][variant=warning][hoverable][inverse=true i].gov-badge .element:hover:active, [type=outlined][variant=warning][hoverable][inverse="1"].gov-badge .element:hover:active {
+    color: var(--gov-button-warning-outlined-inverse-active-color, var(--gov-color-warning-600));
+  }
+}
+[type=base][variant=warning].gov-badge .element {
+  color: var(--gov-button-warning-outlined-color, var(--gov-color-warning-500));
+  border-width: 0;
+}
+[type=base][variant=warning][inverse=""].gov-badge .element, [type=base][variant=warning][inverse=true i].gov-badge .element, [type=base][variant=warning][inverse="1"].gov-badge .element {
+  color: var(--gov-button-warning-base-inverse-color, var(--gov-color-secondary-100));
+  background-color: var(--gov-button-warning-base-inverse-bg, transparent);
+}
+[type=base][variant=warning][disabled=""].gov-badge .element, [type=base][variant=warning][disabled=true i].gov-badge .element, [type=base][variant=warning][disabled="1"].gov-badge .element {
+  color: var(--gov-button-warning-outlined-disabled-color, var(--gov-color-warning));
+}
+[type=base][variant=warning][disabled=""][inverse=""].gov-badge .element, [type=base][variant=warning][disabled=""][inverse=true i].gov-badge .element, [type=base][variant=warning][disabled=""][inverse="1"].gov-badge .element, [type=base][variant=warning][disabled=true i][inverse=""].gov-badge .element, [type=base][variant=warning][disabled=true i][inverse=true i].gov-badge .element, [type=base][variant=warning][disabled=true i][inverse="1"].gov-badge .element, [type=base][variant=warning][disabled="1"][inverse=""].gov-badge .element, [type=base][variant=warning][disabled="1"][inverse=true i].gov-badge .element, [type=base][variant=warning][disabled="1"][inverse="1"].gov-badge .element {
+  color: var(--gov-button-warning-base-inverse-color, var(--gov-color-secondary-100));
+  opacity: 0.6;
+  background-color: var(--gov-button-warning-base-inverse-bg, transparent);
+}
+@media not all and (pointer: coarse) {
+  [type=base][variant=warning][hoverable].gov-badge .element:hover {
+    background-color: var(--gov-button-warning-outlined-hover-bg, var(--gov-color-warning-200));
+    color: var(--gov-button-warning-outlined-hover-color, var(--gov-color-warning-500));
+  }
+  [type=base][variant=warning][hoverable].gov-badge .element:hover:active {
+    background-color: var(--gov-button-warning-outlined-active-bg, var(--gov-color-warning-300));
+  }
+}
+@media not all and (pointer: coarse) {
+  [type=base][variant=warning][hoverable][inverse=""].gov-badge .element:hover, [type=base][variant=warning][hoverable][inverse=true i].gov-badge .element:hover, [type=base][variant=warning][hoverable][inverse="1"].gov-badge .element:hover {
+    background-color: var(--gov-button-warning-base-inverse-hover-bg, transparent);
+    color: var(--gov-button-warning-base-inverse-hover-color, var(--gov-color-warning-200));
+  }
+  [type=base][variant=warning][hoverable][inverse=""].gov-badge .element:hover:active, [type=base][variant=warning][hoverable][inverse=true i].gov-badge .element:hover:active, [type=base][variant=warning][hoverable][inverse="1"].gov-badge .element:hover:active {
+    color: var(--gov-button-warning-base-inverse-active-color, var(--gov-color-warning-300));
+  }
+}
+[size=xs].gov-badge .element {
+  font-weight: var(--gov-button-text-s-font-weight, var(--gov-text-s-font-weight));
+  font-size: var(--gov-button-text-s-font-size, var(--gov-text-s-font-size));
+  line-height: var(--gov-button-text-s-line-height, var(--gov-text-s-line-height));
+  letter-spacing: var(--gov-button-text-s-letter-spacing, var(--gov-text-s-letter-spacing));
+  -moz-column-gap: var(--gov-button-padding-x, 0.75rem);
+       column-gap: var(--gov-button-padding-x, 0.75rem);
+  min-height: var(--gov-button-min-height, 2rem);
+  padding: var(--gov-button-padding-y, 0.25rem) var(--gov-button-padding-x, 0.75rem);
+}
+[size=xs].gov-badge .element .gov-icon {
+  width: var(--gov-button-icon-size, 1rem);
+  height: var(--gov-button-icon-size, 1rem);
+}
+@media (min-width: 48em) {
+  [size=xs].gov-badge .element {
+    font-weight: var(--gov-button-text-xs-font-weight, var(--gov-text-xs-font-weight));
+    font-size: var(--gov-button-text-xs-font-size, var(--gov-text-xs-font-size));
+    line-height: var(--gov-button-text-xs-line-height, var(--gov-text-xs-line-height));
+    letter-spacing: var(--gov-button-text-xs-letter-spacing, var(--gov-text-xs-letter-spacing));
+    -moz-column-gap: var(--gov-button-padding-x, 0.75rem);
+         column-gap: var(--gov-button-padding-x, 0.75rem);
+    min-height: var(--gov-button-min-height, 1.375rem);
+    padding: var(--gov-button-padding-y, 0.0625rem) var(--gov-button-padding-x, 0.75rem);
+  }
+  [size=xs].gov-badge .element .gov-icon {
+    width: var(--gov-button-icon-size, 1rem);
+    height: var(--gov-button-icon-size, 1rem);
+  }
+}
+[size=s].gov-badge .element {
+  font-weight: var(--gov-button-text-s-font-weight, var(--gov-text-s-font-weight));
+  font-size: var(--gov-button-text-s-font-size, var(--gov-text-s-font-size));
+  line-height: var(--gov-button-text-s-line-height, var(--gov-text-s-line-height));
+  letter-spacing: var(--gov-button-text-s-letter-spacing, var(--gov-text-s-letter-spacing));
+  -moz-column-gap: var(--gov-button-padding-x, 0.75rem);
+       column-gap: var(--gov-button-padding-x, 0.75rem);
+  min-height: var(--gov-button-min-height, 2rem);
+  padding: var(--gov-button-padding-y, 0.25rem) var(--gov-button-padding-x, 0.75rem);
+}
+[size=s].gov-badge .element .gov-icon {
+  width: var(--gov-button-icon-size, 1rem);
+  height: var(--gov-button-icon-size, 1rem);
+}
+@media (min-width: 48em) {
+  [size=s].gov-badge .element {
+    font-weight: var(--gov-button-text-s-font-weight, var(--gov-text-s-font-weight));
+    font-size: var(--gov-button-text-s-font-size, var(--gov-text-s-font-size));
+    line-height: var(--gov-button-text-s-line-height, var(--gov-text-s-line-height));
+    letter-spacing: var(--gov-button-text-s-letter-spacing, var(--gov-text-s-letter-spacing));
+    -moz-column-gap: var(--gov-button-padding-x, 0.75rem);
+         column-gap: var(--gov-button-padding-x, 0.75rem);
+    min-height: var(--gov-button-min-height, 2rem);
+    padding: var(--gov-button-padding-y, 0.25rem) var(--gov-button-padding-x, 0.75rem);
+  }
+  [size=s].gov-badge .element .gov-icon {
+    width: var(--gov-button-icon-size, 1rem);
+    height: var(--gov-button-icon-size, 1rem);
+  }
+}
+[size=m].gov-badge .element {
+  font-weight: var(--gov-button-text-s-font-weight, var(--gov-text-s-font-weight));
+  font-size: var(--gov-button-text-s-font-size, var(--gov-text-s-font-size));
+  line-height: var(--gov-button-text-s-line-height, var(--gov-text-s-line-height));
+  letter-spacing: var(--gov-button-text-s-letter-spacing, var(--gov-text-s-letter-spacing));
+  -moz-column-gap: var(--gov-button-padding-x, 0.75rem);
+       column-gap: var(--gov-button-padding-x, 0.75rem);
+  min-height: var(--gov-button-min-height, 2rem);
+  padding: var(--gov-button-padding-y, 0.25rem) var(--gov-button-padding-x, 0.75rem);
+}
+[size=m].gov-badge .element .gov-icon {
+  width: var(--gov-button-icon-size, 1rem);
+  height: var(--gov-button-icon-size, 1rem);
+}
+@media (min-width: 48em) {
+  [size=m].gov-badge .element {
+    font-weight: var(--gov-button-text-m-font-weight, var(--gov-text-m-font-weight));
+    font-size: var(--gov-button-text-m-font-size, var(--gov-text-m-font-size));
+    line-height: var(--gov-button-text-m-line-height, var(--gov-text-m-line-height));
+    letter-spacing: var(--gov-button-text-m-letter-spacing, var(--gov-text-m-letter-spacing));
+    -moz-column-gap: var(--gov-button-padding-x, 0.75rem);
+         column-gap: var(--gov-button-padding-x, 0.75rem);
+    min-height: var(--gov-button-min-height, 2.5rem);
+    padding: var(--gov-button-padding-y, 0.375rem) var(--gov-button-padding-x, 0.75rem);
+  }
+  [size=m].gov-badge .element .gov-icon {
+    width: var(--gov-button-icon-size, 1.25rem);
+    height: var(--gov-button-icon-size, 1.25rem);
+  }
+}
+[size=l].gov-badge .element {
+  font-weight: var(--gov-button-text-m-font-weight, var(--gov-text-m-font-weight));
+  font-size: var(--gov-button-text-m-font-size, var(--gov-text-m-font-size));
+  line-height: var(--gov-button-text-m-line-height, var(--gov-text-m-line-height));
+  letter-spacing: var(--gov-button-text-m-letter-spacing, var(--gov-text-m-letter-spacing));
+  -moz-column-gap: var(--gov-button-padding-x, 0.75rem);
+       column-gap: var(--gov-button-padding-x, 0.75rem);
+  min-height: var(--gov-button-min-height, 2.5rem);
+  padding: var(--gov-button-padding-y, 0.375rem) var(--gov-button-padding-x, 0.75rem);
+}
+[size=l].gov-badge .element .gov-icon {
+  width: var(--gov-button-icon-size, 1.25rem);
+  height: var(--gov-button-icon-size, 1.25rem);
+}
+@media (min-width: 48em) {
+  [size=l].gov-badge .element {
+    font-weight: var(--gov-button-text-l-font-weight, var(--gov-text-l-font-weight));
+    font-size: var(--gov-button-text-l-font-size, var(--gov-text-l-font-size));
+    line-height: var(--gov-button-text-l-line-height, var(--gov-text-l-line-height));
+    letter-spacing: var(--gov-button-text-l-letter-spacing, var(--gov-text-l-letter-spacing));
+    -moz-column-gap: var(--gov-button-padding-x, 1rem);
+         column-gap: var(--gov-button-padding-x, 1rem);
+    min-height: var(--gov-button-min-height, 3rem);
+    padding: var(--gov-button-padding-y, 0.5rem) var(--gov-button-padding-x, 1rem);
+  }
+  [size=l].gov-badge .element .gov-icon {
+    width: var(--gov-button-icon-size, 1.5rem);
+    height: var(--gov-button-icon-size, 1.5rem);
+  }
+}
+[size=xl].gov-badge .element {
+  font-weight: var(--gov-button-text-l-font-weight, var(--gov-text-l-font-weight));
+  font-size: var(--gov-button-text-l-font-size, var(--gov-text-l-font-size));
+  line-height: var(--gov-button-text-l-line-height, var(--gov-text-l-line-height));
+  letter-spacing: var(--gov-button-text-l-letter-spacing, var(--gov-text-l-letter-spacing));
+  -moz-column-gap: var(--gov-button-padding-x, 1rem);
+       column-gap: var(--gov-button-padding-x, 1rem);
+  min-height: var(--gov-button-min-height, 3rem);
+  padding: var(--gov-button-padding-y, 0.5rem) var(--gov-button-padding-x, 1rem);
+}
+[size=xl].gov-badge .element .gov-icon {
+  width: var(--gov-button-icon-size, 1.5rem);
+  height: var(--gov-button-icon-size, 1.5rem);
+}
+@media (min-width: 48em) {
+  [size=xl].gov-badge .element {
+    font-weight: var(--gov-button-text-xl-font-weight, var(--gov-text-xl-font-weight));
+    font-size: var(--gov-button-text-xl-font-size, var(--gov-text-xl-font-size));
+    line-height: var(--gov-button-text-xl-line-height, var(--gov-text-xl-line-height));
+    letter-spacing: var(--gov-button-text-xl-letter-spacing, var(--gov-text-xl-letter-spacing));
+    -moz-column-gap: var(--gov-button-padding-x, 1.25rem);
+         column-gap: var(--gov-button-padding-x, 1.25rem);
+    min-height: var(--gov-button-min-height, 3.5rem);
+    padding: var(--gov-button-padding-y, 0.75rem) var(--gov-button-padding-x, 1.25rem);
+  }
+  [size=xl].gov-badge .element .gov-icon {
+    width: var(--gov-button-icon-size, 1.75rem);
+    height: var(--gov-button-icon-size, 1.75rem);
+  }
+}
+
+.gov-badge a .gov-icon {
+  margin: 0;
+}
+.gov-badge .element {
+  padding: 0.25rem 0.625rem;
+  font-family: "Roboto", sans-serif;
+  font-weight: 400;
+  letter-spacing: initial;
+}
+.gov-badge[size=xs] .element {
+  border-radius: calc(var(--gov-button-min-height, 1.375rem) * 0.5);
+}
+.gov-badge[size=xs][hoverable] .element:focus {
+  outline: none;
+}
+.gov-badge[size=xs][hoverable] .element:focus-visible {
+  border-radius: calc(var(--gov-button-min-height, 1.375rem) * 0.5);
+  outline: var(--gov-outline-width, 0.125rem) solid var(--gov-color-focus-base);
+  outline-offset: 0.0625rem;
+}
+.gov-badge[size=s] .element {
+  border-radius: calc(var(--gov-button-min-height, 2rem) * 0.5);
+}
+.gov-badge[size=s][hoverable] .element:focus {
+  outline: none;
+}
+.gov-badge[size=s][hoverable] .element:focus-visible {
+  border-radius: calc(var(--gov-button-min-height, 2rem) * 0.5);
+  outline: var(--gov-outline-width, 0.125rem) solid var(--gov-color-focus-base);
+  outline-offset: 0.0625rem;
+}
+.gov-badge[size=m] .element {
+  border-radius: calc(var(--gov-button-min-height, 2.5rem) * 0.5);
+}
+.gov-badge[size=m][hoverable] .element:focus {
+  outline: none;
+}
+.gov-badge[size=m][hoverable] .element:focus-visible {
+  border-radius: calc(var(--gov-button-min-height, 2.5rem) * 0.5);
+  outline: var(--gov-outline-width, 0.125rem) solid var(--gov-color-focus-base);
+  outline-offset: 0.0625rem;
+}
+.gov-badge[size=l] .element {
+  border-radius: calc(var(--gov-button-min-height, 3rem) * 0.5);
+}
+.gov-badge[size=l][hoverable] .element:focus {
+  outline: none;
+}
+.gov-badge[size=l][hoverable] .element:focus-visible {
+  border-radius: calc(var(--gov-button-min-height, 3rem) * 0.5);
+  outline: var(--gov-outline-width, 0.125rem) solid var(--gov-color-focus-base);
+  outline-offset: 0.0625rem;
+}
+.gov-badge[size=xl] .element {
+  border-radius: calc(var(--gov-button-min-height, 3.5rem) * 0.5);
+}
+.gov-badge[size=xl][hoverable] .element:focus {
+  outline: none;
+}
+.gov-badge[size=xl][hoverable] .element:focus-visible {
+  border-radius: calc(var(--gov-button-min-height, 3.5rem) * 0.5);
+  outline: var(--gov-outline-width, 0.125rem) solid var(--gov-color-focus-base);
+  outline-offset: 0.0625rem;
+}