@gov-design-system-ce/components 0.0.5 → 0.0.7

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

@@ -148,6 +148,9 @@
 /*
  -	Variables - Form multiselect
  */
+/*
+ -	Variables - Form password power
+ */
 /*
  -	Variables - Form checkbox & radio
  */
@@ -379,6 +382,41 @@
     color: var(--gov-button-primary-base-inverse-active-color, var(--gov-color-neutral-white));
   }
 }
+[type=link][variant=primary].gov-button .element {
+  color: var(--gov-button-primary-link-color, var(--gov-color-primary));
+  border-width: 0;
+}
+[type=link][variant=primary][inverse=""].gov-button .element, [type=link][variant=primary][inverse=true i].gov-button .element, [type=link][variant=primary][inverse="1"].gov-button .element {
+  color: var(--gov-button-primary-link-inverse-color, var(--gov-color-neutral-white));
+  background-color: var(--gov-button-primary-link-inverse-bg, transparent);
+}
+[type=link][variant=primary][disabled=""].gov-button .element, [type=link][variant=primary][disabled=true i].gov-button .element, [type=link][variant=primary][disabled="1"].gov-button .element {
+  color: var(--gov-button-primary-link-disabled-color, var(--gov-color-primary-400));
+}
+[type=link][variant=primary][disabled=""][inverse=""].gov-button .element, [type=link][variant=primary][disabled=""][inverse=true i].gov-button .element, [type=link][variant=primary][disabled=""][inverse="1"].gov-button .element, [type=link][variant=primary][disabled=true i][inverse=""].gov-button .element, [type=link][variant=primary][disabled=true i][inverse=true i].gov-button .element, [type=link][variant=primary][disabled=true i][inverse="1"].gov-button .element, [type=link][variant=primary][disabled="1"][inverse=""].gov-button .element, [type=link][variant=primary][disabled="1"][inverse=true i].gov-button .element, [type=link][variant=primary][disabled="1"][inverse="1"].gov-button .element {
+  background-color: var(--gov-button-primary-link-inverse-disabled-bg, transparent);
+  color: var(--gov-button-primary-link-inverse-disabled-color, var(--gov-color-primary-400));
+}
+@media not all and (pointer: coarse) {
+  [type=link][variant=primary][hoverable].gov-button .element:hover {
+    background-color: var(--gov-button-primary-link-hover-bg, transparent);
+    color: var(--gov-button-primary-link-hover-color, var(--gov-color-primary));
+  }
+  [type=link][variant=primary][hoverable].gov-button .element:hover:active {
+    background-color: var(--gov-button-primary-link-active-bg, transparent);
+    color: var(--gov-button-primary-link-active-color, var(--gov-color-primary-700));
+  }
+}
+@media not all and (pointer: coarse) {
+  [type=link][variant=primary][hoverable][inverse=""].gov-button .element:hover, [type=link][variant=primary][hoverable][inverse=true i].gov-button .element:hover, [type=link][variant=primary][hoverable][inverse="1"].gov-button .element:hover {
+    background-color: var(--gov-button-primary-link-inverse-hover-bg, transparent);
+    color: var(--gov-button-primary-link-inverse-hover-color, var(--gov-color-neutral-white));
+  }
+  [type=link][variant=primary][hoverable][inverse=""].gov-button .element:hover:active, [type=link][variant=primary][hoverable][inverse=true i].gov-button .element:hover:active, [type=link][variant=primary][hoverable][inverse="1"].gov-button .element:hover:active {
+    background-color: var(--gov-button-primary-link-inverse-active-bg, transparent);
+    color: var(--gov-button-primary-link-inverse-active-color, var(--gov-color-primary-200));
+  }
+}
 [type=solid][variant=secondary].gov-button .element {
   background-color: var(--gov-button-secondary-solid-bg, var(--gov-color-secondary));
   color: var(--gov-button-secondary-solid-color, var(--gov-color-neutral-white));
@@ -493,6 +531,41 @@
     color: var(--gov-button-secondary-base-inverse-active-color, var(--gov-color-secondary));
   }
 }
+[type=link][variant=secondary].gov-button .element {
+  color: var(--gov-button-secondary-link-color, var(--gov-color-secondary));
+  border-width: 0;
+}
+[type=link][variant=secondary][inverse=""].gov-button .element, [type=link][variant=secondary][inverse=true i].gov-button .element, [type=link][variant=secondary][inverse="1"].gov-button .element {
+  color: var(--gov-button-secondary-link-inverse-color, var(--gov-color-neutral-white));
+  background-color: var(--gov-button-secondary-link-inverse-bg, transparent);
+}
+[type=link][variant=secondary][disabled=""].gov-button .element, [type=link][variant=secondary][disabled=true i].gov-button .element, [type=link][variant=secondary][disabled="1"].gov-button .element {
+  color: var(--gov-button-secondary-link-disabled-color, var(--gov-color-secondary-600));
+}
+[type=link][variant=secondary][disabled=""][inverse=""].gov-button .element, [type=link][variant=secondary][disabled=""][inverse=true i].gov-button .element, [type=link][variant=secondary][disabled=""][inverse="1"].gov-button .element, [type=link][variant=secondary][disabled=true i][inverse=""].gov-button .element, [type=link][variant=secondary][disabled=true i][inverse=true i].gov-button .element, [type=link][variant=secondary][disabled=true i][inverse="1"].gov-button .element, [type=link][variant=secondary][disabled="1"][inverse=""].gov-button .element, [type=link][variant=secondary][disabled="1"][inverse=true i].gov-button .element, [type=link][variant=secondary][disabled="1"][inverse="1"].gov-button .element {
+  background-color: var(--gov-button-secondary-link-inverse-disabled-bg, transparent);
+  color: var(--gov-button-secondary-link-inverse-disabled-color, var(--gov-color-secondary-600));
+}
+@media not all and (pointer: coarse) {
+  [type=link][variant=secondary][hoverable].gov-button .element:hover {
+    background-color: var(--gov-button-secondary-link-hover-bg, transparent);
+    color: var(--gov-button-secondary-link-hover-color, var(--gov-color-secondary));
+  }
+  [type=link][variant=secondary][hoverable].gov-button .element:hover:active {
+    background-color: var(--gov-button-secondary-link-active-bg, transparent);
+    color: var(--gov-button-primary-link-active-color, var(--gov-color-secondary));
+  }
+}
+@media not all and (pointer: coarse) {
+  [type=link][variant=secondary][hoverable][inverse=""].gov-button .element:hover, [type=link][variant=secondary][hoverable][inverse=true i].gov-button .element:hover, [type=link][variant=secondary][hoverable][inverse="1"].gov-button .element:hover {
+    background-color: var(--gov-button-secondary-link-inverse-hover-bg, transparent);
+    color: var(--gov-button-secondary-link-inverse-hover-color, var(--gov-color-neutral-white));
+  }
+  [type=link][variant=secondary][hoverable][inverse=""].gov-button .element:hover:active, [type=link][variant=secondary][hoverable][inverse=true i].gov-button .element:hover:active, [type=link][variant=secondary][hoverable][inverse="1"].gov-button .element:hover:active {
+    background-color: var(--gov-button-secondary-link-inverse-active-bg, transparent);
+    color: var(--gov-button-secondary-link-inverse-active-color, var(--gov-color-secondary-500));
+  }
+}
 [type=solid][variant=error].gov-button .element {
   background-color: var(--gov-button-error-solid-bg, var(--gov-color-error));
   color: var(--gov-button-error-solid-color, var(--gov-color-neutral-white));
@@ -605,6 +678,41 @@
     color: var(--gov-button-error-base-inverse-active-color, var(--gov-color-neutral-white));
   }
 }
+[type=link][variant=error].gov-button .element {
+  color: var(--gov-button-error-link-color, var(--gov-color-error));
+  border-width: 0;
+}
+[type=link][variant=error][inverse=""].gov-button .element, [type=link][variant=error][inverse=true i].gov-button .element, [type=link][variant=error][inverse="1"].gov-button .element {
+  color: var(--gov-button-error-link-inverse-color, var(--gov-color-neutral-white));
+  background-color: var(--gov-button-error-link-inverse-bg, transparent);
+}
+[type=link][variant=error][disabled=""].gov-button .element, [type=link][variant=error][disabled=true i].gov-button .element, [type=link][variant=error][disabled="1"].gov-button .element {
+  color: var(--gov-button-error-link-disabled-color, var(--gov-color-error-200));
+}
+[type=link][variant=error][disabled=""][inverse=""].gov-button .element, [type=link][variant=error][disabled=""][inverse=true i].gov-button .element, [type=link][variant=error][disabled=""][inverse="1"].gov-button .element, [type=link][variant=error][disabled=true i][inverse=""].gov-button .element, [type=link][variant=error][disabled=true i][inverse=true i].gov-button .element, [type=link][variant=error][disabled=true i][inverse="1"].gov-button .element, [type=link][variant=error][disabled="1"][inverse=""].gov-button .element, [type=link][variant=error][disabled="1"][inverse=true i].gov-button .element, [type=link][variant=error][disabled="1"][inverse="1"].gov-button .element {
+  background-color: var(--gov-button-error-link-inverse-disabled-bg, transparent);
+  color: var(--gov-button-error-link-inverse-disabled-color, var(--gov-color-error-200));
+}
+@media not all and (pointer: coarse) {
+  [type=link][variant=error][hoverable].gov-button .element:hover {
+    background-color: var(--gov-button-error-link-hover-bg, transparent);
+    color: var(--gov-button-error-link-hover-color, var(--gov-color-error));
+  }
+  [type=link][variant=error][hoverable].gov-button .element:hover:active {
+    background-color: var(--gov-button-error-link-active-bg, transparent);
+    color: var(--gov-button-primary-link-active-color, var(--gov-color-error-500));
+  }
+}
+@media not all and (pointer: coarse) {
+  [type=link][variant=error][hoverable][inverse=""].gov-button .element:hover, [type=link][variant=error][hoverable][inverse=true i].gov-button .element:hover, [type=link][variant=error][hoverable][inverse="1"].gov-button .element:hover {
+    background-color: var(--gov-button-error-link-inverse-hover-bg, transparent);
+    color: var(--gov-button-error-link-inverse-hover-color, var(--gov-color-neutral-white));
+  }
+  [type=link][variant=error][hoverable][inverse=""].gov-button .element:hover:active, [type=link][variant=error][hoverable][inverse=true i].gov-button .element:hover:active, [type=link][variant=error][hoverable][inverse="1"].gov-button .element:hover:active {
+    background-color: var(--gov-button-error-link-inverse-active-bg, transparent);
+    color: var(--gov-button-error-link-inverse-active-color, var(--gov-color-neutral-white));
+  }
+}
 [type=solid][variant=success].gov-button .element {
   background-color: var(--gov-button-success-solid-bg, var(--gov-color-success-500));
   color: var(--gov-button-success-solid-color, var(--gov-color-neutral-white));
@@ -717,6 +825,41 @@
     color: var(--gov-button-success-base-inverse-active-color, var(--gov-color-neutral-white));
   }
 }
+[type=link][variant=success].gov-button .element {
+  color: var(--gov-button-success-link-color, var(--gov-color-success-500));
+  border-width: 0;
+}
+[type=link][variant=success][inverse=""].gov-button .element, [type=link][variant=success][inverse=true i].gov-button .element, [type=link][variant=success][inverse="1"].gov-button .element {
+  color: var(--gov-button-success-link-inverse-color, var(--gov-color-neutral-white));
+  background-color: var(--gov-button-success-link-inverse-bg, transparent);
+}
+[type=link][variant=success][disabled=""].gov-button .element, [type=link][variant=success][disabled=true i].gov-button .element, [type=link][variant=success][disabled="1"].gov-button .element {
+  color: var(--gov-button-success-link-disabled-color, var(--gov-color-success-300));
+}
+[type=link][variant=success][disabled=""][inverse=""].gov-button .element, [type=link][variant=success][disabled=""][inverse=true i].gov-button .element, [type=link][variant=success][disabled=""][inverse="1"].gov-button .element, [type=link][variant=success][disabled=true i][inverse=""].gov-button .element, [type=link][variant=success][disabled=true i][inverse=true i].gov-button .element, [type=link][variant=success][disabled=true i][inverse="1"].gov-button .element, [type=link][variant=success][disabled="1"][inverse=""].gov-button .element, [type=link][variant=success][disabled="1"][inverse=true i].gov-button .element, [type=link][variant=success][disabled="1"][inverse="1"].gov-button .element {
+  background-color: var(--gov-button-success-link-inverse-disabled-bg, transparent);
+  color: var(--gov-button-success-link-inverse-disabled-color, var(--gov-color-success-400));
+}
+@media not all and (pointer: coarse) {
+  [type=link][variant=success][hoverable].gov-button .element:hover {
+    background-color: var(--gov-button-success-link-hover-bg, transparent);
+    color: var(--gov-button-success-link-hover-color, var(--gov-color-success-500));
+  }
+  [type=link][variant=success][hoverable].gov-button .element:hover:active {
+    background-color: var(--gov-button-success-link-active-bg, transparent);
+    color: var(--gov-button-primary-link-active-color, var(--gov-color-success-600));
+  }
+}
+@media not all and (pointer: coarse) {
+  [type=link][variant=success][hoverable][inverse=""].gov-button .element:hover, [type=link][variant=success][hoverable][inverse=true i].gov-button .element:hover, [type=link][variant=success][hoverable][inverse="1"].gov-button .element:hover {
+    background-color: var(--gov-button-success-link-inverse-hover-bg, transparent);
+    color: var(--gov-button-success-link-inverse-hover-color, var(--gov-color-neutral-white));
+  }
+  [type=link][variant=success][hoverable][inverse=""].gov-button .element:hover:active, [type=link][variant=success][hoverable][inverse=true i].gov-button .element:hover:active, [type=link][variant=success][hoverable][inverse="1"].gov-button .element:hover:active {
+    background-color: var(--gov-button-success-link-inverse-active-bg, transparent);
+    color: var(--gov-button-success-link-inverse-active-color, var(--gov-color-neutral-white));
+  }
+}
 [type=solid][variant=warning].gov-button .element {
   background-color: var(--gov-button-warning-solid-bg, var(--gov-color-warning-500));
   color: var(--gov-button-warning-solid-color, var(--gov-color-neutral-white));
@@ -829,6 +972,41 @@
     color: var(--gov-button-warning-base-inverse-active-color, var(--gov-color-neutral-white));
   }
 }
+[type=link][variant=warning].gov-button .element {
+  color: var(--gov-button-warning-link-color, var(--gov-color-warning-500));
+  border-width: 0;
+}
+[type=link][variant=warning][inverse=""].gov-button .element, [type=link][variant=warning][inverse=true i].gov-button .element, [type=link][variant=warning][inverse="1"].gov-button .element {
+  color: var(--gov-button-warning-link-inverse-color, var(--gov-color-neutral-white));
+  background-color: var(--gov-button-warning-link-inverse-bg, transparent);
+}
+[type=link][variant=warning][disabled=""].gov-button .element, [type=link][variant=warning][disabled=true i].gov-button .element, [type=link][variant=warning][disabled="1"].gov-button .element {
+  color: var(--gov-button-warning-link-disabled-color, var(--gov-color-warning));
+}
+[type=link][variant=warning][disabled=""][inverse=""].gov-button .element, [type=link][variant=warning][disabled=""][inverse=true i].gov-button .element, [type=link][variant=warning][disabled=""][inverse="1"].gov-button .element, [type=link][variant=warning][disabled=true i][inverse=""].gov-button .element, [type=link][variant=warning][disabled=true i][inverse=true i].gov-button .element, [type=link][variant=warning][disabled=true i][inverse="1"].gov-button .element, [type=link][variant=warning][disabled="1"][inverse=""].gov-button .element, [type=link][variant=warning][disabled="1"][inverse=true i].gov-button .element, [type=link][variant=warning][disabled="1"][inverse="1"].gov-button .element {
+  background-color: var(--gov-button-warning-link-inverse-disabled-bg, transparent);
+  color: var(--gov-button-warning-link-inverse-disabled-color, var(--gov-color-warning-400));
+}
+@media not all and (pointer: coarse) {
+  [type=link][variant=warning][hoverable].gov-button .element:hover {
+    background-color: var(--gov-button-warning-link-hover-bg, transparent);
+    color: var(--gov-button-warning-link-hover-color, var(--gov-color-warning-500));
+  }
+  [type=link][variant=warning][hoverable].gov-button .element:hover:active {
+    background-color: var(--gov-button-warning-link-active-bg, transparent);
+    color: var(--gov-button-primary-link-active-color, var(--gov-color-warning-600));
+  }
+}
+@media not all and (pointer: coarse) {
+  [type=link][variant=warning][hoverable][inverse=""].gov-button .element:hover, [type=link][variant=warning][hoverable][inverse=true i].gov-button .element:hover, [type=link][variant=warning][hoverable][inverse="1"].gov-button .element:hover {
+    background-color: var(--gov-button-warning-link-inverse-hover-bg, transparent);
+    color: var(--gov-button-warning-link-inverse-hover-color, var(--gov-color-neutral-white));
+  }
+  [type=link][variant=warning][hoverable][inverse=""].gov-button .element:hover:active, [type=link][variant=warning][hoverable][inverse=true i].gov-button .element:hover:active, [type=link][variant=warning][hoverable][inverse="1"].gov-button .element:hover:active {
+    background-color: var(--gov-button-warning-link-inverse-active-bg, transparent);
+    color: var(--gov-button-warning-link-inverse-active-color, var(--gov-color-neutral-white));
+  }
+}
 [size=xs].gov-button .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));
@@ -843,22 +1021,6 @@
   width: var(--gov-button-xs-icon-size, 1rem);
   height: var(--gov-button-xs-icon-size, 1rem);
 }
-@media (min-width: 48em) {
-  [size=xs].gov-button .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-xs-padding-x, 0.625rem);
-         column-gap: var(--gov-button-xs-padding-x, 0.625rem);
-    min-height: var(--gov-button-xs-min-height, 1.5rem);
-    padding: var(--gov-button-xs-padding-y, 0.125rem) var(--gov-button-xs-padding-x, 0.625rem);
-  }
-  [size=xs].gov-button .element .gov-icon {
-    width: var(--gov-button-xs-icon-size, 1rem);
-    height: var(--gov-button-xs-icon-size, 1rem);
-  }
-}
 [size=s].gov-button .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));
@@ -873,53 +1035,7 @@
   width: var(--gov-button-s-icon-size, 1rem);
   height: var(--gov-button-s-icon-size, 1rem);
 }
-@media (min-width: 48em) {
-  [size=s].gov-button .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-s-padding-x, 0.75rem);
-         column-gap: var(--gov-button-s-padding-x, 0.75rem);
-    min-height: var(--gov-button-s-min-height, 2rem);
-    padding: var(--gov-button-s-padding-y, 0.25rem) var(--gov-button-s-padding-x, 0.75rem);
-  }
-  [size=s].gov-button .element .gov-icon {
-    width: var(--gov-button-s-icon-size, 1rem);
-    height: var(--gov-button-s-icon-size, 1rem);
-  }
-}
 [size=m].gov-button .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-s-padding-x, 0.75rem);
-       column-gap: var(--gov-button-s-padding-x, 0.75rem);
-  min-height: var(--gov-button-s-min-height, 2rem);
-  padding: var(--gov-button-s-padding-y, 0.25rem) var(--gov-button-s-padding-x, 0.75rem);
-}
-[size=m].gov-button .element .gov-icon {
-  width: var(--gov-button-s-icon-size, 1rem);
-  height: var(--gov-button-s-icon-size, 1rem);
-}
-@media (min-width: 48em) {
-  [size=m].gov-button .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-m-padding-x, 0.75rem);
-         column-gap: var(--gov-button-m-padding-x, 0.75rem);
-    min-height: var(--gov-button-m-min-height, 2.5rem);
-    padding: var(--gov-button-m-padding-y, 0.375rem) var(--gov-button-m-padding-x, 0.75rem);
-  }
-  [size=m].gov-button .element .gov-icon {
-    width: var(--gov-button-m-icon-size, 1.25rem);
-    height: var(--gov-button-m-icon-size, 1.25rem);
-  }
-}
-[size=l].gov-button .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));
@@ -929,27 +1045,11 @@
   min-height: var(--gov-button-m-min-height, 2.5rem);
   padding: var(--gov-button-m-padding-y, 0.375rem) var(--gov-button-m-padding-x, 0.75rem);
 }
-[size=l].gov-button .element .gov-icon {
+[size=m].gov-button .element .gov-icon {
   width: var(--gov-button-m-icon-size, 1.25rem);
   height: var(--gov-button-m-icon-size, 1.25rem);
 }
-@media (min-width: 48em) {
-  [size=l].gov-button .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-l-padding-x, 1rem);
-         column-gap: var(--gov-button-l-padding-x, 1rem);
-    min-height: var(--gov-button-l-min-height, 3rem);
-    padding: var(--gov-button-l-padding-y, 0.5rem) var(--gov-button-l-padding-x, 1rem);
-  }
-  [size=l].gov-button .element .gov-icon {
-    width: var(--gov-button-l-icon-size, 1.5rem);
-    height: var(--gov-button-l-icon-size, 1.5rem);
-  }
-}
-[size=xl].gov-button .element {
+[size=l].gov-button .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));
@@ -959,25 +1059,23 @@
   min-height: var(--gov-button-l-min-height, 3rem);
   padding: var(--gov-button-l-padding-y, 0.5rem) var(--gov-button-l-padding-x, 1rem);
 }
-[size=xl].gov-button .element .gov-icon {
+[size=l].gov-button .element .gov-icon {
   width: var(--gov-button-l-icon-size, 1.5rem);
   height: var(--gov-button-l-icon-size, 1.5rem);
 }
-@media (min-width: 48em) {
-  [size=xl].gov-button .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-xl-padding-x, 1.25rem);
-         column-gap: var(--gov-button-xl-padding-x, 1.25rem);
-    min-height: var(--gov-button-xl-min-height, 3.5rem);
-    padding: var(--gov-button-xl-padding-y, 0.75rem) var(--gov-button-xl-padding-x, 1.25rem);
-  }
-  [size=xl].gov-button .element .gov-icon {
-    width: var(--gov-button-xl-icon-size, 1.75rem);
-    height: var(--gov-button-xl-icon-size, 1.75rem);
-  }
+[size=xl].gov-button .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-xl-padding-x, 1.25rem);
+       column-gap: var(--gov-button-xl-padding-x, 1.25rem);
+  min-height: var(--gov-button-xl-min-height, 3.5rem);
+  padding: var(--gov-button-xl-padding-y, 0.75rem) var(--gov-button-xl-padding-x, 1.25rem);
+}
+[size=xl].gov-button .element .gov-icon {
+  width: var(--gov-button-xl-icon-size, 1.75rem);
+  height: var(--gov-button-xl-icon-size, 1.75rem);
 }
 
 .gov-button {
@@ -986,53 +1084,34 @@
 .gov-button .element {
   border-radius: var(--gov-border-radius, 0.1875rem);
 }
+.gov-button[type=link] .element {
+  padding: 0;
+  text-decoration: underline;
+  line-height: inherit;
+  min-height: inherit;
+}
+@media not all and (pointer: coarse) {
+  .gov-button[type=link] .element:hover {
+    text-decoration: none;
+  }
+}
 .gov-button[loading=true] .element > .gov-icon:not(.gov-spin-animation),
 .gov-button[loading=true] .element > gov-icon:not(.gov-spin-animation), .gov-button[loading="1"] .element > .gov-icon:not(.gov-spin-animation),
 .gov-button[loading="1"] .element > gov-icon:not(.gov-spin-animation) {
   display: none;
 }
-.gov-button:not(.gov-button--w-icon)[loading="0"][size=xs] .element, .gov-button:not(.gov-button--w-icon)[loading=false][size=xs] .element, .gov-button:not(.gov-button--w-icon)[loading=""][size=xs] .element {
+.gov-button:not(.gov-button--w-icon)[loading="0"][size=xs] .element, .gov-button:not(.gov-button--w-icon)[loading=false][size=xs] .element, .gov-button:not(.gov-button--w-icon)[loading=""][size=xs] .gov-button:not[type=link] .element {
   padding: var(--gov-button-xs-padding-y, 0.125rem) calc(var(--gov-button-xs-padding-x, 0.625rem) + var(--gov-button-xs-padding-x, 0.625rem) / 2 + var(--gov-button-xs-icon-size, 1rem) / 2);
 }
-.gov-button:not(.gov-button--w-icon)[loading="0"][size=s] .element, .gov-button:not(.gov-button--w-icon)[loading=false][size=s] .element, .gov-button:not(.gov-button--w-icon)[loading=""][size=s] .element {
+.gov-button:not(.gov-button--w-icon)[loading="0"][size=s] .element, .gov-button:not(.gov-button--w-icon)[loading=false][size=s] .element, .gov-button:not(.gov-button--w-icon)[loading=""][size=s] .gov-button:not[type=link] .element {
   padding: var(--gov-button-s-padding-y, 0.25rem) calc(var(--gov-button-s-padding-x, 0.75rem) + var(--gov-button-s-padding-x, 0.75rem) / 2 + var(--gov-button-s-icon-size, 1rem) / 2);
 }
-.gov-button:not(.gov-button--w-icon)[loading="0"][size=m] .element, .gov-button:not(.gov-button--w-icon)[loading=false][size=m] .element, .gov-button:not(.gov-button--w-icon)[loading=""][size=m] .element {
+.gov-button:not(.gov-button--w-icon)[loading="0"][size=m] .element, .gov-button:not(.gov-button--w-icon)[loading=false][size=m] .element, .gov-button:not(.gov-button--w-icon)[loading=""][size=m] .gov-button:not[type=link] .element {
   padding: var(--gov-button-m-padding-y, 0.375rem) calc(var(--gov-button-m-padding-x, 0.75rem) + var(--gov-button-m-padding-x, 0.75rem) / 2 + var(--gov-button-m-icon-size, 1.25rem) / 2);
 }
-.gov-button:not(.gov-button--w-icon)[loading="0"][size=l] .element, .gov-button:not(.gov-button--w-icon)[loading=false][size=l] .element, .gov-button:not(.gov-button--w-icon)[loading=""][size=l] .element {
+.gov-button:not(.gov-button--w-icon)[loading="0"][size=l] .element, .gov-button:not(.gov-button--w-icon)[loading=false][size=l] .element, .gov-button:not(.gov-button--w-icon)[loading=""][size=l] .gov-button:not[type=link] .element {
   padding: var(--gov-button-l-padding-y, 0.5rem) calc(var(--gov-button-l-padding-x, 1rem) + var(--gov-button-l-padding-x, 1rem) / 2 + var(--gov-button-l-icon-size, 1.5rem) / 2);
 }
-.gov-button:not(.gov-button--w-icon)[loading="0"][size=xl] .element, .gov-button:not(.gov-button--w-icon)[loading=false][size=xl] .element, .gov-button:not(.gov-button--w-icon)[loading=""][size=xl] .element {
+.gov-button:not(.gov-button--w-icon)[loading="0"][size=xl] .element, .gov-button:not(.gov-button--w-icon)[loading=false][size=xl] .element, .gov-button:not(.gov-button--w-icon)[loading=""][size=xl] .gov-button:not[type=link] .element {
   padding: var(--gov-button-xl-padding-y, 0.75rem) calc(var(--gov-button-xl-padding-x, 1.25rem) + var(--gov-button-xl-padding-x, 1.25rem) / 2 + var(--gov-button-xl-icon-size, 1.75rem) / 2);
-}
-.gov-button[type=outlined][variant=primary] .gov-spin-animation, .gov-button[type=base][variant=primary] .gov-spin-animation {
-  color: var(--gov-button-primary-outlined-color, var(--gov-color-primary));
-}
-.gov-button[type=outlined][variant=primary][inverse=""] .gov-spin-animation, .gov-button[type=outlined][variant=primary][inverse=true i] .gov-spin-animation, .gov-button[type=outlined][variant=primary][inverse="1"] .gov-spin-animation, .gov-button[type=base][variant=primary][inverse=""] .gov-spin-animation, .gov-button[type=base][variant=primary][inverse=true i] .gov-spin-animation, .gov-button[type=base][variant=primary][inverse="1"] .gov-spin-animation {
-  color: inherit;
-}
-.gov-button[type=outlined][variant=secondary] .gov-spin-animation, .gov-button[type=base][variant=secondary] .gov-spin-animation {
-  color: var(--gov-button-secondary-outlined-color, var(--gov-color-secondary));
-}
-.gov-button[type=outlined][variant=secondary][inverse=""] .gov-spin-animation, .gov-button[type=outlined][variant=secondary][inverse=true i] .gov-spin-animation, .gov-button[type=outlined][variant=secondary][inverse="1"] .gov-spin-animation, .gov-button[type=base][variant=secondary][inverse=""] .gov-spin-animation, .gov-button[type=base][variant=secondary][inverse=true i] .gov-spin-animation, .gov-button[type=base][variant=secondary][inverse="1"] .gov-spin-animation {
-  color: inherit;
-}
-.gov-button[type=outlined][variant=error] .gov-spin-animation, .gov-button[type=base][variant=error] .gov-spin-animation {
-  color: var(--gov-button-error-outlined-color, var(--gov-color-error));
-}
-.gov-button[type=outlined][variant=error][inverse=""] .gov-spin-animation, .gov-button[type=outlined][variant=error][inverse=true i] .gov-spin-animation, .gov-button[type=outlined][variant=error][inverse="1"] .gov-spin-animation, .gov-button[type=base][variant=error][inverse=""] .gov-spin-animation, .gov-button[type=base][variant=error][inverse=true i] .gov-spin-animation, .gov-button[type=base][variant=error][inverse="1"] .gov-spin-animation {
-  color: inherit;
-}
-.gov-button[type=outlined][variant=success] .gov-spin-animation, .gov-button[type=base][variant=success] .gov-spin-animation {
-  color: var(--gov-button-success-outlined-color, var(--gov-color-success-500));
-}
-.gov-button[type=outlined][variant=success][inverse=""] .gov-spin-animation, .gov-button[type=outlined][variant=success][inverse=true i] .gov-spin-animation, .gov-button[type=outlined][variant=success][inverse="1"] .gov-spin-animation, .gov-button[type=base][variant=success][inverse=""] .gov-spin-animation, .gov-button[type=base][variant=success][inverse=true i] .gov-spin-animation, .gov-button[type=base][variant=success][inverse="1"] .gov-spin-animation {
-  color: inherit;
-}
-.gov-button[type=outlined][variant=warning] .gov-spin-animation, .gov-button[type=base][variant=warning] .gov-spin-animation {
-  color: var(--gov-button-warning-outlined-color, var(--gov-color-warning-500));
-}
-.gov-button[type=outlined][variant=warning][inverse=""] .gov-spin-animation, .gov-button[type=outlined][variant=warning][inverse=true i] .gov-spin-animation, .gov-button[type=outlined][variant=warning][inverse="1"] .gov-spin-animation, .gov-button[type=base][variant=warning][inverse=""] .gov-spin-animation, .gov-button[type=base][variant=warning][inverse=true i] .gov-spin-animation, .gov-button[type=base][variant=warning][inverse="1"] .gov-spin-animation {
-  color: inherit;
 }