@fremtind/jokul 0.14.0 → 0.15.0

package/src/components/button/styles/button.css

@@ -2,250 +2,183 @@
  * Do not edit directly
  * Generated on Mon, 23 Sep 2024 08:51:40 GMT
  */
-:root,
-[data-layout-density=comfortable],
-[data-density=comfortable] {
-  --jkl-button-font-size: var(--jkl-body-font-size);
-  --jkl-button-line-height: 3rem;
-  --jkl-button-font-weight: 700;
-  --jkl-button-min-width: 6.5rem;
-  --jkl-button-padding: 0 1.5rem;
-  --jkl-button-tertiary-padding: 0 0.125rem;
-  --jkl-button-children-padding-with-icon: 0.125rem;
-  --jkl-button-tertiary-padding-with-icon: 0;
-  --jkl-button-focus-ring-placement: -0.3125rem;
-}
-@media (width >= 0) and (max-width: 679px) {
-  :root,
-  [data-layout-density=comfortable],
-  [data-density=comfortable] {
-    --jkl-button-line-height: 2.75rem;
-  }
+.jkl .jkl-button,
+.jkl-button[data-layout-density=comfortable],
+.jkl-button[data-density=comfortable],
+[data-layout-density=comfortable] .jkl-button,
+[data-density=comfortable] .jkl-button {
+  --padding-block: 0.5rem;
+  --padding-text: 1.5rem;
+  --padding-icon: 1rem;
+  --padding-icon-button: 0.5rem;
+  --padding-tertiary-inline: 0.25rem;
+  --padding-ghost-inline: 0.5rem;
 }
 
-[data-layout-density=compact],
-[data-density=compact] {
-  --jkl-button-font-size: var(--jkl-small-font-size);
-  --jkl-button-line-height: 2rem;
-  --jkl-button-font-weight: 700;
-  --jkl-button-min-width: 4.75rem;
-  --jkl-button-padding: 0 0.75rem;
-  --jkl-button-tertiary-padding: 0 0.125rem;
-  --jkl-button-children-padding-with-icon: 0.125rem;
-  --jkl-button-tertiary-padding-with-icon: 0.125rem;
-  --jkl-button-focus-ring-placement: -0.1875rem;
-}
-
-a.jkl-button {
-  text-decoration: none;
+.jkl-button[data-layout-density=compact],
+.jkl-button[data-density=compact],
+[data-layout-density=compact] .jkl-button,
+[data-density=compact] .jkl-button {
+  --padding-block: 0.25rem;
+  --padding-text: 0.75rem;
+  --padding-icon: 0.5rem;
+  --padding-icon-button: 0.25rem;
+  --padding-tertiary-inline: 0.125rem;
+  --padding-ghost-inline: 0.25rem;
 }
 
 .jkl-button {
-  --border-color: var(--jkl-color-background-action);
-  --text-color: var(--jkl-color-background-action);
-  --focus-color: var(--jkl-color-background-action);
+  --text-color: var(--jkl-color-text-default);
   --background-color: transparent;
-  display: inline-flex;
-  box-sizing: border-box;
-  justify-content: center;
-  background-color: var(--background-color);
-  color: var(--text-color);
-  font-size: var(--jkl-button-font-size);
-  line-height: var(--jkl-button-line-height);
-  font-weight: var(--jkl-button-font-weight);
-  height: var(--jkl-button-line-height);
-  min-width: var(--jkl-button-min-width);
+  --border-radius: 0;
+  --border-width: 0.0625rem;
   cursor: pointer;
   user-select: none;
-  overflow: visible;
+  background-color: var(--background-color);
+  color: var(--text-color);
+  border: unset;
+  text-decoration: none;
+  -webkit-tap-highlight-color: transparent;
+  border-radius: var(--border-radius);
+  padding-inline: var(--padding-text);
+  padding-block: var(--padding-block);
   position: relative;
+  overflow: hidden;
+  max-width: 100%;
   transition-timing-function: ease;
   transition-duration: 150ms;
-  transform-origin: 50% 90%;
-  transition-property: transform, background-color;
-  outline: 0;
-  border-style: none;
-  outline-style: none;
-}
-.jkl-button:active, .jkl-button:hover, .jkl-button:focus {
-  outline: 0;
-  outline-style: none;
-}
-@media screen and (forced-colors: active) {
+  transition-property: scale;
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+  font-weight: 400;
+  --jkl-icon-weight: 300;
+  --jkl-icon-weight: 500;
+  font-weight: 700;
+}
+@media (min-width: 680px) {
   .jkl-button {
-    outline: revert;
-    border-style: revert;
-    outline-style: revert;
-  }
-  .jkl-button:active, .jkl-button:hover, .jkl-button:focus {
-    outline: revert;
-    outline-style: revert;
+    font-size: 1.25rem;
+    line-height: 2rem;
+    font-weight: 400;
+    --jkl-icon-weight: 300;
+    --jkl-icon-weight: 500;
+    font-weight: 700;
   }
 }
-.jkl-button:focus-visible, html:not([data-touchnavigation]) .jkl-button:hover {
-  transform: scale(1.05);
+.jkl-button:has(.jkl-icon:first-child) {
+  padding-inline-start: var(--padding-icon);
 }
-html:not([data-mousenavigation]) .jkl-button:active, html:not([data-touchnavigation]) .jkl-button:active, .jkl-button:active {
-  transform: scale(1);
+.jkl-button:has(.jkl-icon:last-child) {
+  padding-inline-end: var(--padding-icon);
 }
-.jkl-button:focus-visible {
-  outline: 2px solid var(--jkl-color-border-action);
-  outline-offset: 2px;
+.jkl-button:has(.jkl-icon:first-child):has(.jkl-icon:last-child) {
+  padding-inline: var(--padding-icon-button);
 }
-html[data-touchnavigation] .jkl-button--pressed {
-  transform: scale(0.95);
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-}
-.jkl-button__content {
-  height: var(--jkl-button-line-height);
-  overflow: hidden;
-}
-.jkl-button__slider {
+.jkl-button__label {
   transition-timing-function: ease;
-  transition-duration: 150ms;
-  transition-property: transform;
-}
-.jkl-button__slider--show-loader {
-  transform: translateY(-51%);
-}
-.jkl-button__loader {
+  transition-duration: 250ms;
+  transition-property: translate;
   display: flex;
-  padding: 0;
+  flex-direction: row;
   align-items: center;
-  justify-content: center;
-  height: var(--jkl-button-line-height);
-}
-.jkl-button--primary, .jkl-button--secondary, .jkl-button--ghost {
-  border: solid 0.0625rem var(--border-color);
-  border-radius: 999px;
-  padding: var(--jkl-button-padding);
+  gap: 0.125rem;
+  pointer-events: none;
 }
-.jkl-button--primary::before, .jkl-button--secondary::before, .jkl-button--ghost::before {
-  content: "";
+.jkl-button__loader {
+  transition-timing-function: ease;
+  transition-duration: 250ms;
+  transition-property: opacity, translate;
   position: absolute;
-  border-radius: 999px;
-  inset: 0;
-}
-html[data-touchnavigation] .jkl-button--primary.jkl-button--pressed::before, html[data-touchnavigation] .jkl-button--secondary.jkl-button--pressed::before, html[data-touchnavigation] .jkl-button--ghost.jkl-button--pressed::before {
-  animation: cubic-bezier(0, 0, 0.375, 1.17) 400ms jkl-flash-unfl9q2;
-}
-.jkl-button--ghost {
-  --border-color: transparent;
-  border-radius: 0.25rem;
-  padding: 0 0.25rem;
-}
-.jkl-button--ghost:focus-visible, html:not([data-touchnavigation]) .jkl-button--ghost:hover {
-  --background-color: var(--jkl-color-background-interactive-hover);
-  transform: scale(1);
-}
-.jkl-button--ghost.jkl-button--icon-left .jkl-button__children {
-  padding-left: var(--jkl-button-children-padding-with-icon);
-}
-.jkl-button--ghost.jkl-button--icon-right .jkl-button__children {
-  padding-right: var(--jkl-button-children-padding-with-icon);
+  top: 50%;
+  left: 50%;
+  translate: -50% 350%;
+  opacity: 0;
+  pointer-events: none;
 }
-.jkl-button--primary {
-  --background-color: var(--jkl-color-background-action);
-  --text-color: var(--jkl-color-text-on-action);
+.jkl-button__text {
+  max-width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
-.jkl-button--secondary {
-  transition-property: box-shadow, transform, background-color;
+.jkl-button[data-loading=true] .jkl-button__label {
+  translate: 0 -120%;
 }
-.jkl-button--secondary:hover, .jkl-button--secondary:focus-visible, html[data-touchnavigation] .jkl-button--secondary.jkl-button--pressed {
-  box-shadow: inset 0 0 0 1px var(--border-color), inset 0 0 0 1px var(--border-color);
+.jkl-button[data-loading=true] .jkl-button__loader {
+  translate: -50% -50%;
+  opacity: 1;
 }
-.jkl-button--tertiary {
-  border-bottom: solid 0.0625rem var(--border-color);
-  border-top: solid 0.0625rem transparent;
-  padding: var(--jkl-button-tertiary-padding);
-  transition: transform 100ms cubic-bezier(0.6, 0.2, 0.35, 1), border 100ms cubic-bezier(0.6, 0.2, 0.35, 1);
-  min-width: unset;
+.jkl-button:focus-visible {
+  outline: 2px solid var(--jkl-color-border-action);
+  outline-offset: 2px;
 }
-.jkl-button--tertiary::before {
+.jkl-button::before {
   content: "";
   pointer-events: none;
   display: block;
   position: absolute;
   left: var(--jkl-touch-xcoord, 50%);
   top: var(--jkl-touch-ycoord, 50%);
-  transform: translate3d(-50%, -50%, 0);
-  border-radius: 100%;
+  translate: -100%, -100%;
+  transform-origin: center;
+  border-radius: 9999px;
+  background-color: var(--text-color);
+  opacity: 0;
   width: 1rem;
   height: 1rem;
-  background-color: transparent;
 }
-html[data-touchnavigation] .jkl-button--tertiary.jkl-button--pressed::before {
-  animation: cubic-bezier(0, 0, 0.375, 1.17) 400ms jkl-tertiary-flash-unfl9qn;
+html[data-touchnavigation] .jkl-button.jkl-button--pressed::before {
+  animation: cubic-bezier(0.6, 0.2, 0.35, 1) 250ms jkl-tertiary-flash-ufu16mk;
 }
-.jkl-button--tertiary:focus-visible {
-  border: none;
+:not([data-touchnavigation]) .jkl-button--primary:hover, :not([data-touchnavigation]) .jkl-button--secondary:hover, :not([data-touchnavigation]) .jkl-button--tertiary:hover {
+  scale: 1.05;
+  transform-origin: center;
 }
-@media screen and (forced-colors: active) {
-  .jkl-button--tertiary:focus-visible {
-    border: revert;
-  }
-}
-.jkl-button--tertiary:hover, .jkl-button--tertiary:focus-visible, html[data-touchnavigation] .jkl-button--tertiary.jkl-button--pressed {
-  border-bottom-color: var(--focus-color);
-  border-bottom-width: 0.125rem;
-  color: var(--focus-color);
-}
-.jkl-button--icon-left .jkl-button__icon, .jkl-button--icon-right .jkl-button__icon {
-  display: inline-block;
-  vertical-align: sub;
+.jkl-button--primary, .jkl-button--secondary {
+  --border-radius: 999px;
 }
-.jkl-button--icon-left {
-  padding-left: 0.5rem;
+.jkl-button--primary {
+  --background-color: var(--jkl-color-background-action);
+  --text-color: var(--jkl-color-text-on-action);
 }
-.jkl-button--icon-left .jkl-button__children {
-  padding-left: var(--jkl-button-children-padding-with-icon);
+.jkl-button--secondary::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: var(--border-radius);
+  border: var(--border-width) solid var(--text-color);
 }
-.jkl-button--icon-left.jkl-button--tertiary {
-  padding-left: var(--jkl-button-tertiary-padding-with-icon);
+.jkl-button--tertiary, .jkl-button--tertiary:has(.jkl-icon:first-child), .jkl-button--tertiary:has(.jkl-icon:last-child) {
+  padding-inline: var(--padding-tertiary-inline);
 }
-.jkl-button--icon-right {
-  padding-right: 0.5rem;
+.jkl-button--tertiary::after, .jkl-button--tertiary:has(.jkl-icon:first-child)::after, .jkl-button--tertiary:has(.jkl-icon:last-child)::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: var(--border-radius);
+  border-bottom: var(--border-width) solid var(--text-color);
 }
-.jkl-button--icon-right .jkl-button__children {
-  padding-right: var(--jkl-button-children-padding-with-icon);
+.jkl-button--tertiary:hover, .jkl-button--tertiary:focus-visible, .jkl-button--tertiary:has(.jkl-icon:first-child):hover, .jkl-button--tertiary:has(.jkl-icon:first-child):focus-visible, .jkl-button--tertiary:has(.jkl-icon:last-child):hover, .jkl-button--tertiary:has(.jkl-icon:last-child):focus-visible {
+  --border-width: 0.125rem;
 }
-.jkl-button--icon-right.jkl-button--tertiary {
-  padding-right: var(--jkl-button-tertiary-padding-with-icon);
+.jkl-button--ghost, .jkl-button--ghost:has(.jkl-icon:first-child), .jkl-button--ghost:has(.jkl-icon:last-child) {
+  padding-inline: var(--padding-ghost-inline);
+  border-radius: 0.25rem;
+  transition-timing-function: ease;
+  transition-duration: 150ms;
+  transition-property: background-color;
 }
-@media screen and (forced-colors: active) {
-  .jkl-button.jkl-button--primary:not(a), .jkl-button.jkl-button--secondary:not(a), .jkl-button.jkl-button--primary:hover:not(a), .jkl-button.jkl-button--secondary:hover:not(a), .jkl-button.jkl-button--primary:focus:not(a), .jkl-button.jkl-button--secondary:focus:not(a) {
-    border-color: ButtonText;
-  }
-  .jkl-button .jkl-loader__dot {
-    background-color: ButtonText;
-  }
-  .jkl-button.jkl-button--tertiary {
-    outline-offset: 0.125rem;
-    border-top-style: none;
-    border-right-style: none;
-    border-left-style: none;
-  }
+.jkl-button--ghost:hover, .jkl-button--ghost:has(.jkl-icon:first-child):hover, .jkl-button--ghost:has(.jkl-icon:last-child):hover {
+  --background-color: var(--jkl-color-background-interactive-hover);
 }
 
-@keyframes jkl-flash-unfl9q2 {
-  0% {
-    box-shadow: 0 0 0 0 var(--focus-color);
-    opacity: 0.5;
-  }
-  100% {
-    box-shadow: 0 0 0 1rem var(--focus-color);
-    opacity: 0;
-  }
-}
-@keyframes jkl-tertiary-flash-unfl9qn {
+@keyframes jkl-tertiary-flash-ufu16mk {
   0% {
-    box-shadow: 0 0 0 0 var(--focus-color);
-    background-color: var(--focus-color);
     opacity: 0.5;
+    scale: 1;
   }
   100% {
-    box-shadow: 0 0 0 2.5rem var(--focus-color);
-    background-color: var(--focus-color);
     opacity: 0;
+    scale: 8;
   }
 }

package/src/components/button/styles/button.min.css

@@ -1 +1 @@
-:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-button-font-size:var(--jkl-body-font-size);--jkl-button-line-height:3rem;--jkl-button-font-weight:700;--jkl-button-min-width:6.5rem;--jkl-button-padding:0 1.5rem;--jkl-button-tertiary-padding:0 0.125rem;--jkl-button-children-padding-with-icon:0.125rem;--jkl-button-tertiary-padding-with-icon:0;--jkl-button-focus-ring-placement:-0.3125rem}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-button-line-height:2.75rem}}[data-density=compact],[data-layout-density=compact]{--jkl-button-font-size:var(--jkl-small-font-size);--jkl-button-line-height:2rem;--jkl-button-font-weight:700;--jkl-button-min-width:4.75rem;--jkl-button-padding:0 0.75rem;--jkl-button-tertiary-padding:0 0.125rem;--jkl-button-children-padding-with-icon:0.125rem;--jkl-button-tertiary-padding-with-icon:0.125rem;--jkl-button-focus-ring-placement:-0.1875rem}a.jkl-button{text-decoration:none}.jkl-button{--border-color:var(--jkl-color-background-action);--text-color:var(--jkl-color-background-action);--focus-color:var(--jkl-color-background-action);--background-color:#0000;background-color:var(--background-color);border-style:none;box-sizing:border-box;color:var(--text-color);cursor:pointer;display:inline-flex;font-size:var(--jkl-button-font-size);font-weight:var(--jkl-button-font-weight);height:var(--jkl-button-line-height);justify-content:center;line-height:var(--jkl-button-line-height);min-width:var(--jkl-button-min-width);overflow:visible;position:relative;transform-origin:50% 90%;transition-duration:.15s;transition-property:transform,background-color;transition-timing-function:ease;-webkit-user-select:none;user-select:none}.jkl-button,.jkl-button:active,.jkl-button:focus,.jkl-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-button{border-style:revert}.jkl-button,.jkl-button:active,.jkl-button:focus,.jkl-button:hover{outline:revert;outline-style:revert}}.jkl-button:focus-visible,html:not([data-touchnavigation]) .jkl-button:hover{transform:scale(1.05)}.jkl-button:active,html:not([data-mousenavigation]) .jkl-button:active,html:not([data-touchnavigation]) .jkl-button:active{transform:scale(1)}.jkl-button:focus-visible{outline:2px solid var(--jkl-color-border-action);outline-offset:2px}html[data-touchnavigation] .jkl-button--pressed{transform:scale(.95);-webkit-tap-highlight-color:rgba(0,0,0,0)}.jkl-button__content{height:var(--jkl-button-line-height);overflow:hidden}.jkl-button__slider{transition-duration:.15s;transition-property:transform;transition-timing-function:ease}.jkl-button__slider--show-loader{transform:translateY(-51%)}.jkl-button__loader{align-items:center;display:flex;height:var(--jkl-button-line-height);justify-content:center;padding:0}.jkl-button--ghost,.jkl-button--primary,.jkl-button--secondary{border:.0625rem solid var(--border-color);border-radius:999px;padding:var(--jkl-button-padding)}.jkl-button--ghost:before,.jkl-button--primary:before,.jkl-button--secondary:before{border-radius:999px;content:"";inset:0;position:absolute}html[data-touchnavigation] .jkl-button--ghost.jkl-button--pressed:before,html[data-touchnavigation] .jkl-button--primary.jkl-button--pressed:before,html[data-touchnavigation] .jkl-button--secondary.jkl-button--pressed:before{animation:jkl-flash-unfl9q2 .4s cubic-bezier(0,0,.375,1.17)}.jkl-button--ghost{--border-color:#0000;border-radius:.25rem;padding:0 .25rem}.jkl-button--ghost:focus-visible,html:not([data-touchnavigation]) .jkl-button--ghost:hover{--background-color:var(--jkl-color-background-interactive-hover);transform:scale(1)}.jkl-button--ghost.jkl-button--icon-left .jkl-button__children{padding-left:var(--jkl-button-children-padding-with-icon)}.jkl-button--ghost.jkl-button--icon-right .jkl-button__children{padding-right:var(--jkl-button-children-padding-with-icon)}.jkl-button--primary{--background-color:var(--jkl-color-background-action);--text-color:var(--jkl-color-text-on-action)}.jkl-button--secondary{transition-property:box-shadow,transform,background-color}.jkl-button--secondary:focus-visible,.jkl-button--secondary:hover,html[data-touchnavigation] .jkl-button--secondary.jkl-button--pressed{box-shadow:inset 0 0 0 1px var(--border-color),inset 0 0 0 1px var(--border-color)}.jkl-button--tertiary{border-bottom:.0625rem solid var(--border-color);border-top:.0625rem solid #0000;min-width:unset;padding:var(--jkl-button-tertiary-padding);transition:transform .1s cubic-bezier(.6,.2,.35,1),border .1s cubic-bezier(.6,.2,.35,1)}.jkl-button--tertiary:before{background-color:initial;border-radius:100%;content:"";display:block;height:1rem;left:var(--jkl-touch-xcoord,50%);pointer-events:none;position:absolute;top:var(--jkl-touch-ycoord,50%);transform:translate3d(-50%,-50%,0);width:1rem}html[data-touchnavigation] .jkl-button--tertiary.jkl-button--pressed:before{animation:jkl-tertiary-flash-unfl9qn .4s cubic-bezier(0,0,.375,1.17)}.jkl-button--tertiary:focus-visible{border:none}@media screen and (forced-colors:active){.jkl-button--tertiary:focus-visible{border:revert}}.jkl-button--tertiary:focus-visible,.jkl-button--tertiary:hover,html[data-touchnavigation] .jkl-button--tertiary.jkl-button--pressed{border-bottom-color:var(--focus-color);border-bottom-width:.125rem;color:var(--focus-color)}.jkl-button--icon-left .jkl-button__icon,.jkl-button--icon-right .jkl-button__icon{display:inline-block;vertical-align:sub}.jkl-button--icon-left{padding-left:.5rem}.jkl-button--icon-left .jkl-button__children{padding-left:var(--jkl-button-children-padding-with-icon)}.jkl-button--icon-left.jkl-button--tertiary{padding-left:var(--jkl-button-tertiary-padding-with-icon)}.jkl-button--icon-right{padding-right:.5rem}.jkl-button--icon-right .jkl-button__children{padding-right:var(--jkl-button-children-padding-with-icon)}.jkl-button--icon-right.jkl-button--tertiary{padding-right:var(--jkl-button-tertiary-padding-with-icon)}@media screen and (forced-colors:active){.jkl-button.jkl-button--primary:focus:not(a),.jkl-button.jkl-button--primary:hover:not(a),.jkl-button.jkl-button--primary:not(a),.jkl-button.jkl-button--secondary:focus:not(a),.jkl-button.jkl-button--secondary:hover:not(a),.jkl-button.jkl-button--secondary:not(a){border-color:ButtonText}.jkl-button .jkl-loader__dot{background-color:ButtonText}.jkl-button.jkl-button--tertiary{border-left-style:none;border-right-style:none;border-top-style:none;outline-offset:.125rem}}@keyframes jkl-flash-unfl9q2{0%{box-shadow:0 0 0 0 var(--focus-color);opacity:.5}to{box-shadow:0 0 0 1rem var(--focus-color);opacity:0}}@keyframes jkl-tertiary-flash-unfl9qn{0%{background-color:var(--focus-color);box-shadow:0 0 0 0 var(--focus-color);opacity:.5}to{background-color:var(--focus-color);box-shadow:0 0 0 2.5rem var(--focus-color);opacity:0}}
+.jkl .jkl-button,.jkl-button[data-density=comfortable],.jkl-button[data-layout-density=comfortable],[data-density=comfortable] .jkl-button,[data-layout-density=comfortable] .jkl-button{--padding-block:0.5rem;--padding-text:1.5rem;--padding-icon:1rem;--padding-icon-button:0.5rem;--padding-tertiary-inline:0.25rem;--padding-ghost-inline:0.5rem}.jkl-button[data-density=compact],.jkl-button[data-layout-density=compact],[data-density=compact] .jkl-button,[data-layout-density=compact] .jkl-button{--padding-block:0.25rem;--padding-text:0.75rem;--padding-icon:0.5rem;--padding-icon-button:0.25rem;--padding-tertiary-inline:0.125rem;--padding-ghost-inline:0.25rem}.jkl-button{--text-color:var(--jkl-color-text-default);--background-color:#0000;--border-radius:0;--border-width:0.0625rem;background-color:var(--background-color);border:unset;color:var(--text-color);cursor:pointer;text-decoration:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;border-radius:var(--border-radius);font-size:1.125rem;font-weight:400;line-height:1.75rem;max-width:100%;overflow:hidden;padding-block:var(--padding-block);padding-inline:var(--padding-text);position:relative;transition-duration:.15s;transition-property:scale;transition-timing-function:ease;--jkl-icon-weight:300;--jkl-icon-weight:500;font-weight:700}@media (min-width:680px){.jkl-button{font-size:1.25rem;font-weight:400;line-height:2rem;--jkl-icon-weight:300;--jkl-icon-weight:500;font-weight:700}}.jkl-button:has(.jkl-icon:first-child){padding-inline-start:var(--padding-icon)}.jkl-button:has(.jkl-icon:last-child){padding-inline-end:var(--padding-icon)}.jkl-button:has(.jkl-icon:first-child):has(.jkl-icon:last-child){padding-inline:var(--padding-icon-button)}.jkl-button__label{align-items:center;display:flex;flex-direction:row;gap:.125rem;pointer-events:none;transition-duration:.25s;transition-property:translate;transition-timing-function:ease}.jkl-button__loader{left:50%;opacity:0;pointer-events:none;position:absolute;top:50%;transition-duration:.25s;transition-property:opacity,translate;transition-timing-function:ease;translate:-50% 350%}.jkl-button__text{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.jkl-button[data-loading=true] .jkl-button__label{translate:0 -120%}.jkl-button[data-loading=true] .jkl-button__loader{opacity:1;translate:-50% -50%}.jkl-button:focus-visible{outline:2px solid var(--jkl-color-border-action);outline-offset:2px}.jkl-button:before{background-color:var(--text-color);border-radius:9999px;content:"";display:block;height:1rem;left:var(--jkl-touch-xcoord,50%);opacity:0;pointer-events:none;position:absolute;top:var(--jkl-touch-ycoord,50%);transform-origin:center;translate:-100%,-100%;width:1rem}html[data-touchnavigation] .jkl-button.jkl-button--pressed:before{animation:jkl-tertiary-flash-ufu16mk .25s cubic-bezier(.6,.2,.35,1)}:not([data-touchnavigation]) .jkl-button--primary:hover,:not([data-touchnavigation]) .jkl-button--secondary:hover,:not([data-touchnavigation]) .jkl-button--tertiary:hover{scale:1.05;transform-origin:center}.jkl-button--primary,.jkl-button--secondary{--border-radius:999px}.jkl-button--primary{--background-color:var(--jkl-color-background-action);--text-color:var(--jkl-color-text-on-action)}.jkl-button--secondary:after{border:var(--border-width) solid var(--text-color);border-radius:var(--border-radius);content:"";inset:0;position:absolute}.jkl-button--tertiary,.jkl-button--tertiary:has(.jkl-icon:first-child),.jkl-button--tertiary:has(.jkl-icon:last-child){padding-inline:var(--padding-tertiary-inline)}.jkl-button--tertiary:after,.jkl-button--tertiary:has(.jkl-icon:first-child):after,.jkl-button--tertiary:has(.jkl-icon:last-child):after{border-bottom:var(--border-width) solid var(--text-color);border-radius:var(--border-radius);content:"";inset:0;position:absolute}.jkl-button--tertiary:focus-visible,.jkl-button--tertiary:has(.jkl-icon:first-child):focus-visible,.jkl-button--tertiary:has(.jkl-icon:first-child):hover,.jkl-button--tertiary:has(.jkl-icon:last-child):focus-visible,.jkl-button--tertiary:has(.jkl-icon:last-child):hover,.jkl-button--tertiary:hover{--border-width:0.125rem}.jkl-button--ghost,.jkl-button--ghost:has(.jkl-icon:first-child),.jkl-button--ghost:has(.jkl-icon:last-child){border-radius:.25rem;padding-inline:var(--padding-ghost-inline);transition-duration:.15s;transition-property:background-color;transition-timing-function:ease}.jkl-button--ghost:has(.jkl-icon:first-child):hover,.jkl-button--ghost:has(.jkl-icon:last-child):hover,.jkl-button--ghost:hover{--background-color:var(--jkl-color-background-interactive-hover)}@keyframes jkl-tertiary-flash-ufu16mk{0%{opacity:.5;scale:1}to{opacity:0;scale:8}}