@ulu/frontend 0.6.12 → 0.6.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -131,6 +131,11 @@
131
131
  "title": "Large Button",
132
132
  "description": "A larger button variant.",
133
133
  "html": "<button class=\"button button--large\">Large Button</button>"
134
+ },
135
+ {
136
+ "title": "Left Aligned Button",
137
+ "description": "A button with its content aligned to the left, useful when the button spans a larger width.",
138
+ "html": "<button class=\"button button--left\" style=\"width: 100%;\">Left Aligned</button>"
134
139
  }
135
140
  ],
136
141
  "callout": [
@@ -13966,8 +13971,8 @@
13966
13971
  "name": "set",
13967
13972
  "code": "\n $config: map.merge($config, $changes) !global;\n",
13968
13973
  "line": {
13969
- "start": 33,
13970
- "end": 35
13974
+ "start": 31,
13975
+ "end": 33
13971
13976
  }
13972
13977
  }
13973
13978
  },
@@ -13978,8 +13983,8 @@
13978
13983
  "name": "set",
13979
13984
  "code": "\n $config: map.merge($config, $changes) !global;\n",
13980
13985
  "line": {
13981
- "start": 33,
13982
- "end": 35
13986
+ "start": 31,
13987
+ "end": 33
13983
13988
  }
13984
13989
  }
13985
13990
  },
@@ -13990,8 +13995,8 @@
13990
13995
  "name": "get",
13991
13996
  "code": "\n $value: utils.require-map-get($config, $name, \"component-button [config]\");\n @return utils.function-fallback($name, $value, $-fallbacks);\n",
13992
13997
  "line": {
13993
- "start": 42,
13994
- "end": 45
13998
+ "start": 40,
13999
+ "end": 43
13995
14000
  }
13996
14001
  }
13997
14002
  },
@@ -17196,34 +17201,10 @@
17196
17201
  "context": {
17197
17202
  "type": "mixin",
17198
17203
  "name": "styles",
17199
- "code": "\n @include utils.file-header('component', 'button');\n\n $prefix: selector.class(\"button\");\n // $printContextual: get(\"contextual-classes\");\n // $classContextual: \"#{ selector.class(\"button-inside\") } ;\n $icon-selector: \"#{ $prefix }--icon\";\n $printDescendant: \"#{ $prefix }--icon\";\n\n #{ $prefix } {\n @include button.default();\n }\n #{ $prefix }--fit {\n min-width: 0;\n }\n #{ $prefix }__icon {\n &:not(:first-child) { \n margin-inline-start: get(\"icon-margin\"); \n }\n &:not(:last-child) { \n margin-inline-end: get(\"icon-margin\"); \n }\n }\n \n @each $size, $values in button.$sizes {\n #{ $prefix }--#{$size} {\n @include button.size($size);\n }\n }\n \n @each $style, $values in button.$styles {\n #{ $prefix }--#{$style} {\n @include button.style($style);\n }\n }\n \n #{ $icon-selector } {\n \n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 0;\n max-width: none;\n border-radius: button.get(\"icon-border-radius\");\n font-size: button.get(\"icon-font-size\");\n width: button.get(\"icon-size\");\n height: button.get(\"icon-size\");\n padding: 0 !important;\n\n #{ $prefix }__icon {\n transform: translateY(get(\"icon-centered-vertical-offset\"));\n margin: 0;\n }\n }\n\n @each $size, $values in button.$sizes {\n $icon-size: map.get($values, \"icon-size\");\n $icon-font-size: map.get($values, \"icon-font-size\");\n @if ($icon-size or $icon-font-size) {\n #{ $prefix }--#{$size}#{ $icon-selector } {\n width: $icon-size;\n height: $icon-size;\n font-size: $icon-font-size;\n }\n }\n }\n",
17200
- "line": {
17201
- "start": 53,
17202
- "end": 119
17203
- }
17204
- }
17205
- },
17206
- {
17207
- "description": "Output button component styles\n",
17208
- "context": {
17209
- "type": "mixin",
17210
- "name": "styles",
17211
- "code": "\n @include utils.file-header('component', 'button');\n\n $prefix: selector.class(\"button\");\n // $printContextual: get(\"contextual-classes\");\n // $classContextual: \"#{ selector.class(\"button-inside\") } ;\n $icon-selector: \"#{ $prefix }--icon\";\n $printDescendant: \"#{ $prefix }--icon\";\n\n #{ $prefix } {\n @include button.default();\n }\n #{ $prefix }--fit {\n min-width: 0;\n }\n #{ $prefix }__icon {\n &:not(:first-child) { \n margin-inline-start: get(\"icon-margin\"); \n }\n &:not(:last-child) { \n margin-inline-end: get(\"icon-margin\"); \n }\n }\n \n @each $size, $values in button.$sizes {\n #{ $prefix }--#{$size} {\n @include button.size($size);\n }\n }\n \n @each $style, $values in button.$styles {\n #{ $prefix }--#{$style} {\n @include button.style($style);\n }\n }\n \n #{ $icon-selector } {\n \n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 0;\n max-width: none;\n border-radius: button.get(\"icon-border-radius\");\n font-size: button.get(\"icon-font-size\");\n width: button.get(\"icon-size\");\n height: button.get(\"icon-size\");\n padding: 0 !important;\n\n #{ $prefix }__icon {\n transform: translateY(get(\"icon-centered-vertical-offset\"));\n margin: 0;\n }\n }\n\n @each $size, $values in button.$sizes {\n $icon-size: map.get($values, \"icon-size\");\n $icon-font-size: map.get($values, \"icon-font-size\");\n @if ($icon-size or $icon-font-size) {\n #{ $prefix }--#{$size}#{ $icon-selector } {\n width: $icon-size;\n height: $icon-size;\n font-size: $icon-font-size;\n }\n }\n }\n",
17212
- "line": {
17213
- "start": 53,
17214
- "end": 119
17215
- }
17216
- }
17217
- },
17218
- {
17219
- "description": "Output button component styles\n",
17220
- "context": {
17221
- "type": "mixin",
17222
- "name": "styles",
17223
- "code": "\n @include utils.file-header('component', 'button');\n\n $prefix: selector.class(\"button\");\n // $printContextual: get(\"contextual-classes\");\n // $classContextual: \"#{ selector.class(\"button-inside\") } ;\n $icon-selector: \"#{ $prefix }--icon\";\n $printDescendant: \"#{ $prefix }--icon\";\n\n #{ $prefix } {\n @include button.default();\n }\n #{ $prefix }--fit {\n min-width: 0;\n }\n #{ $prefix }__icon {\n &:not(:first-child) { \n margin-inline-start: get(\"icon-margin\"); \n }\n &:not(:last-child) { \n margin-inline-end: get(\"icon-margin\"); \n }\n }\n \n @each $size, $values in button.$sizes {\n #{ $prefix }--#{$size} {\n @include button.size($size);\n }\n }\n \n @each $style, $values in button.$styles {\n #{ $prefix }--#{$style} {\n @include button.style($style);\n }\n }\n \n #{ $icon-selector } {\n \n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 0;\n max-width: none;\n border-radius: button.get(\"icon-border-radius\");\n font-size: button.get(\"icon-font-size\");\n width: button.get(\"icon-size\");\n height: button.get(\"icon-size\");\n padding: 0 !important;\n\n #{ $prefix }__icon {\n transform: translateY(get(\"icon-centered-vertical-offset\"));\n margin: 0;\n }\n }\n\n @each $size, $values in button.$sizes {\n $icon-size: map.get($values, \"icon-size\");\n $icon-font-size: map.get($values, \"icon-font-size\");\n @if ($icon-size or $icon-font-size) {\n #{ $prefix }--#{$size}#{ $icon-selector } {\n width: $icon-size;\n height: $icon-size;\n font-size: $icon-font-size;\n }\n }\n }\n",
17204
+ "code": "\n @include utils.file-header('component', 'button');\n\n $prefix: selector.class(\"button\");\n // $printContextual: get(\"contextual-classes\");\n // $classContextual: \"#{ selector.class(\"button-inside\") } ;\n $icon-selector: \"#{ $prefix }--icon\";\n $printDescendant: \"#{ $prefix }--icon\";\n\n #{ $prefix } {\n @include button.default();\n }\n #{ $prefix }--fit {\n min-width: 0;\n }\n #{ $prefix }--left {\n justify-content: flex-start;\n text-align: left;\n }\n \n @each $size, $values in button.$sizes {\n #{ $prefix }--#{$size} {\n @include button.size($size);\n }\n }\n \n @each $style, $values in button.$styles {\n #{ $prefix }--#{$style} {\n @include button.style($style);\n }\n }\n \n #{ $icon-selector } {\n \n min-width: 0;\n max-width: none;\n border-radius: button.get(\"icon-border-radius\");\n font-size: button.get(\"icon-font-size\");\n width: button.get(\"icon-size\");\n height: button.get(\"icon-size\");\n padding: 0 !important;\n\n #{ $prefix }__icon {\n transform: translateY(get(\"icon-centered-vertical-offset\"));\n margin: 0;\n }\n }\n\n @each $size, $values in button.$sizes {\n $icon-size: map.get($values, \"icon-size\");\n $icon-font-size: map.get($values, \"icon-font-size\");\n @if ($icon-size or $icon-font-size) {\n #{ $prefix }--#{$size}#{ $icon-selector } {\n width: $icon-size;\n height: $icon-size;\n font-size: $icon-font-size;\n }\n }\n }\n",
17224
17205
  "line": {
17225
- "start": 53,
17226
- "end": 119
17206
+ "start": 51,
17207
+ "end": 110
17227
17208
  }
17228
17209
  }
17229
17210
  },
@@ -17232,10 +17213,10 @@
17232
17213
  "context": {
17233
17214
  "type": "mixin",
17234
17215
  "name": "styles",
17235
- "code": "\n @include utils.file-header('component', 'button');\n\n $prefix: selector.class(\"button\");\n // $printContextual: get(\"contextual-classes\");\n // $classContextual: \"#{ selector.class(\"button-inside\") } ;\n $icon-selector: \"#{ $prefix }--icon\";\n $printDescendant: \"#{ $prefix }--icon\";\n\n #{ $prefix } {\n @include button.default();\n }\n #{ $prefix }--fit {\n min-width: 0;\n }\n #{ $prefix }__icon {\n &:not(:first-child) { \n margin-inline-start: get(\"icon-margin\"); \n }\n &:not(:last-child) { \n margin-inline-end: get(\"icon-margin\"); \n }\n }\n \n @each $size, $values in button.$sizes {\n #{ $prefix }--#{$size} {\n @include button.size($size);\n }\n }\n \n @each $style, $values in button.$styles {\n #{ $prefix }--#{$style} {\n @include button.style($style);\n }\n }\n \n #{ $icon-selector } {\n \n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 0;\n max-width: none;\n border-radius: button.get(\"icon-border-radius\");\n font-size: button.get(\"icon-font-size\");\n width: button.get(\"icon-size\");\n height: button.get(\"icon-size\");\n padding: 0 !important;\n\n #{ $prefix }__icon {\n transform: translateY(get(\"icon-centered-vertical-offset\"));\n margin: 0;\n }\n }\n\n @each $size, $values in button.$sizes {\n $icon-size: map.get($values, \"icon-size\");\n $icon-font-size: map.get($values, \"icon-font-size\");\n @if ($icon-size or $icon-font-size) {\n #{ $prefix }--#{$size}#{ $icon-selector } {\n width: $icon-size;\n height: $icon-size;\n font-size: $icon-font-size;\n }\n }\n }\n",
17216
+ "code": "\n @include utils.file-header('component', 'button');\n\n $prefix: selector.class(\"button\");\n // $printContextual: get(\"contextual-classes\");\n // $classContextual: \"#{ selector.class(\"button-inside\") } ;\n $icon-selector: \"#{ $prefix }--icon\";\n $printDescendant: \"#{ $prefix }--icon\";\n\n #{ $prefix } {\n @include button.default();\n }\n #{ $prefix }--fit {\n min-width: 0;\n }\n #{ $prefix }--left {\n justify-content: flex-start;\n text-align: left;\n }\n \n @each $size, $values in button.$sizes {\n #{ $prefix }--#{$size} {\n @include button.size($size);\n }\n }\n \n @each $style, $values in button.$styles {\n #{ $prefix }--#{$style} {\n @include button.style($style);\n }\n }\n \n #{ $icon-selector } {\n \n min-width: 0;\n max-width: none;\n border-radius: button.get(\"icon-border-radius\");\n font-size: button.get(\"icon-font-size\");\n width: button.get(\"icon-size\");\n height: button.get(\"icon-size\");\n padding: 0 !important;\n\n #{ $prefix }__icon {\n transform: translateY(get(\"icon-centered-vertical-offset\"));\n margin: 0;\n }\n }\n\n @each $size, $values in button.$sizes {\n $icon-size: map.get($values, \"icon-size\");\n $icon-font-size: map.get($values, \"icon-font-size\");\n @if ($icon-size or $icon-font-size) {\n #{ $prefix }--#{$size}#{ $icon-selector } {\n width: $icon-size;\n height: $icon-size;\n font-size: $icon-font-size;\n }\n }\n }\n",
17236
17217
  "line": {
17237
- "start": 53,
17238
- "end": 119
17218
+ "start": 51,
17219
+ "end": 110
17239
17220
  }
17240
17221
  }
17241
17222
  },
@@ -17244,10 +17225,10 @@
17244
17225
  "context": {
17245
17226
  "type": "mixin",
17246
17227
  "name": "styles",
17247
- "code": "\n @include utils.file-header('component', 'button');\n\n $prefix: selector.class(\"button\");\n // $printContextual: get(\"contextual-classes\");\n // $classContextual: \"#{ selector.class(\"button-inside\") } ;\n $icon-selector: \"#{ $prefix }--icon\";\n $printDescendant: \"#{ $prefix }--icon\";\n\n #{ $prefix } {\n @include button.default();\n }\n #{ $prefix }--fit {\n min-width: 0;\n }\n #{ $prefix }__icon {\n &:not(:first-child) { \n margin-inline-start: get(\"icon-margin\"); \n }\n &:not(:last-child) { \n margin-inline-end: get(\"icon-margin\"); \n }\n }\n \n @each $size, $values in button.$sizes {\n #{ $prefix }--#{$size} {\n @include button.size($size);\n }\n }\n \n @each $style, $values in button.$styles {\n #{ $prefix }--#{$style} {\n @include button.style($style);\n }\n }\n \n #{ $icon-selector } {\n \n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 0;\n max-width: none;\n border-radius: button.get(\"icon-border-radius\");\n font-size: button.get(\"icon-font-size\");\n width: button.get(\"icon-size\");\n height: button.get(\"icon-size\");\n padding: 0 !important;\n\n #{ $prefix }__icon {\n transform: translateY(get(\"icon-centered-vertical-offset\"));\n margin: 0;\n }\n }\n\n @each $size, $values in button.$sizes {\n $icon-size: map.get($values, \"icon-size\");\n $icon-font-size: map.get($values, \"icon-font-size\");\n @if ($icon-size or $icon-font-size) {\n #{ $prefix }--#{$size}#{ $icon-selector } {\n width: $icon-size;\n height: $icon-size;\n font-size: $icon-font-size;\n }\n }\n }\n",
17228
+ "code": "\n @include utils.file-header('component', 'button');\n\n $prefix: selector.class(\"button\");\n // $printContextual: get(\"contextual-classes\");\n // $classContextual: \"#{ selector.class(\"button-inside\") } ;\n $icon-selector: \"#{ $prefix }--icon\";\n $printDescendant: \"#{ $prefix }--icon\";\n\n #{ $prefix } {\n @include button.default();\n }\n #{ $prefix }--fit {\n min-width: 0;\n }\n #{ $prefix }--left {\n justify-content: flex-start;\n text-align: left;\n }\n \n @each $size, $values in button.$sizes {\n #{ $prefix }--#{$size} {\n @include button.size($size);\n }\n }\n \n @each $style, $values in button.$styles {\n #{ $prefix }--#{$style} {\n @include button.style($style);\n }\n }\n \n #{ $icon-selector } {\n \n min-width: 0;\n max-width: none;\n border-radius: button.get(\"icon-border-radius\");\n font-size: button.get(\"icon-font-size\");\n width: button.get(\"icon-size\");\n height: button.get(\"icon-size\");\n padding: 0 !important;\n\n #{ $prefix }__icon {\n transform: translateY(get(\"icon-centered-vertical-offset\"));\n margin: 0;\n }\n }\n\n @each $size, $values in button.$sizes {\n $icon-size: map.get($values, \"icon-size\");\n $icon-font-size: map.get($values, \"icon-font-size\");\n @if ($icon-size or $icon-font-size) {\n #{ $prefix }--#{$size}#{ $icon-selector } {\n width: $icon-size;\n height: $icon-size;\n font-size: $icon-font-size;\n }\n }\n }\n",
17248
17229
  "line": {
17249
- "start": 53,
17250
- "end": 119
17230
+ "start": 51,
17231
+ "end": 110
17251
17232
  }
17252
17233
  }
17253
17234
  },
@@ -17256,10 +17237,10 @@
17256
17237
  "context": {
17257
17238
  "type": "mixin",
17258
17239
  "name": "styles",
17259
- "code": "\n @include utils.file-header('component', 'button');\n\n $prefix: selector.class(\"button\");\n // $printContextual: get(\"contextual-classes\");\n // $classContextual: \"#{ selector.class(\"button-inside\") } ;\n $icon-selector: \"#{ $prefix }--icon\";\n $printDescendant: \"#{ $prefix }--icon\";\n\n #{ $prefix } {\n @include button.default();\n }\n #{ $prefix }--fit {\n min-width: 0;\n }\n #{ $prefix }__icon {\n &:not(:first-child) { \n margin-inline-start: get(\"icon-margin\"); \n }\n &:not(:last-child) { \n margin-inline-end: get(\"icon-margin\"); \n }\n }\n \n @each $size, $values in button.$sizes {\n #{ $prefix }--#{$size} {\n @include button.size($size);\n }\n }\n \n @each $style, $values in button.$styles {\n #{ $prefix }--#{$style} {\n @include button.style($style);\n }\n }\n \n #{ $icon-selector } {\n \n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 0;\n max-width: none;\n border-radius: button.get(\"icon-border-radius\");\n font-size: button.get(\"icon-font-size\");\n width: button.get(\"icon-size\");\n height: button.get(\"icon-size\");\n padding: 0 !important;\n\n #{ $prefix }__icon {\n transform: translateY(get(\"icon-centered-vertical-offset\"));\n margin: 0;\n }\n }\n\n @each $size, $values in button.$sizes {\n $icon-size: map.get($values, \"icon-size\");\n $icon-font-size: map.get($values, \"icon-font-size\");\n @if ($icon-size or $icon-font-size) {\n #{ $prefix }--#{$size}#{ $icon-selector } {\n width: $icon-size;\n height: $icon-size;\n font-size: $icon-font-size;\n }\n }\n }\n",
17240
+ "code": "\n @include utils.file-header('component', 'button');\n\n $prefix: selector.class(\"button\");\n // $printContextual: get(\"contextual-classes\");\n // $classContextual: \"#{ selector.class(\"button-inside\") } ;\n $icon-selector: \"#{ $prefix }--icon\";\n $printDescendant: \"#{ $prefix }--icon\";\n\n #{ $prefix } {\n @include button.default();\n }\n #{ $prefix }--fit {\n min-width: 0;\n }\n #{ $prefix }--left {\n justify-content: flex-start;\n text-align: left;\n }\n \n @each $size, $values in button.$sizes {\n #{ $prefix }--#{$size} {\n @include button.size($size);\n }\n }\n \n @each $style, $values in button.$styles {\n #{ $prefix }--#{$style} {\n @include button.style($style);\n }\n }\n \n #{ $icon-selector } {\n \n min-width: 0;\n max-width: none;\n border-radius: button.get(\"icon-border-radius\");\n font-size: button.get(\"icon-font-size\");\n width: button.get(\"icon-size\");\n height: button.get(\"icon-size\");\n padding: 0 !important;\n\n #{ $prefix }__icon {\n transform: translateY(get(\"icon-centered-vertical-offset\"));\n margin: 0;\n }\n }\n\n @each $size, $values in button.$sizes {\n $icon-size: map.get($values, \"icon-size\");\n $icon-font-size: map.get($values, \"icon-font-size\");\n @if ($icon-size or $icon-font-size) {\n #{ $prefix }--#{$size}#{ $icon-selector } {\n width: $icon-size;\n height: $icon-size;\n font-size: $icon-font-size;\n }\n }\n }\n",
17260
17241
  "line": {
17261
- "start": 53,
17262
- "end": 119
17242
+ "start": 51,
17243
+ "end": 110
17263
17244
  }
17264
17245
  }
17265
17246
  },
@@ -17268,10 +17249,10 @@
17268
17249
  "context": {
17269
17250
  "type": "mixin",
17270
17251
  "name": "styles",
17271
- "code": "\n @include utils.file-header('component', 'button');\n\n $prefix: selector.class(\"button\");\n // $printContextual: get(\"contextual-classes\");\n // $classContextual: \"#{ selector.class(\"button-inside\") } ;\n $icon-selector: \"#{ $prefix }--icon\";\n $printDescendant: \"#{ $prefix }--icon\";\n\n #{ $prefix } {\n @include button.default();\n }\n #{ $prefix }--fit {\n min-width: 0;\n }\n #{ $prefix }__icon {\n &:not(:first-child) { \n margin-inline-start: get(\"icon-margin\"); \n }\n &:not(:last-child) { \n margin-inline-end: get(\"icon-margin\"); \n }\n }\n \n @each $size, $values in button.$sizes {\n #{ $prefix }--#{$size} {\n @include button.size($size);\n }\n }\n \n @each $style, $values in button.$styles {\n #{ $prefix }--#{$style} {\n @include button.style($style);\n }\n }\n \n #{ $icon-selector } {\n \n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 0;\n max-width: none;\n border-radius: button.get(\"icon-border-radius\");\n font-size: button.get(\"icon-font-size\");\n width: button.get(\"icon-size\");\n height: button.get(\"icon-size\");\n padding: 0 !important;\n\n #{ $prefix }__icon {\n transform: translateY(get(\"icon-centered-vertical-offset\"));\n margin: 0;\n }\n }\n\n @each $size, $values in button.$sizes {\n $icon-size: map.get($values, \"icon-size\");\n $icon-font-size: map.get($values, \"icon-font-size\");\n @if ($icon-size or $icon-font-size) {\n #{ $prefix }--#{$size}#{ $icon-selector } {\n width: $icon-size;\n height: $icon-size;\n font-size: $icon-font-size;\n }\n }\n }\n",
17252
+ "code": "\n @include utils.file-header('component', 'button');\n\n $prefix: selector.class(\"button\");\n // $printContextual: get(\"contextual-classes\");\n // $classContextual: \"#{ selector.class(\"button-inside\") } ;\n $icon-selector: \"#{ $prefix }--icon\";\n $printDescendant: \"#{ $prefix }--icon\";\n\n #{ $prefix } {\n @include button.default();\n }\n #{ $prefix }--fit {\n min-width: 0;\n }\n #{ $prefix }--left {\n justify-content: flex-start;\n text-align: left;\n }\n \n @each $size, $values in button.$sizes {\n #{ $prefix }--#{$size} {\n @include button.size($size);\n }\n }\n \n @each $style, $values in button.$styles {\n #{ $prefix }--#{$style} {\n @include button.style($style);\n }\n }\n \n #{ $icon-selector } {\n \n min-width: 0;\n max-width: none;\n border-radius: button.get(\"icon-border-radius\");\n font-size: button.get(\"icon-font-size\");\n width: button.get(\"icon-size\");\n height: button.get(\"icon-size\");\n padding: 0 !important;\n\n #{ $prefix }__icon {\n transform: translateY(get(\"icon-centered-vertical-offset\"));\n margin: 0;\n }\n }\n\n @each $size, $values in button.$sizes {\n $icon-size: map.get($values, \"icon-size\");\n $icon-font-size: map.get($values, \"icon-font-size\");\n @if ($icon-size or $icon-font-size) {\n #{ $prefix }--#{$size}#{ $icon-selector } {\n width: $icon-size;\n height: $icon-size;\n font-size: $icon-font-size;\n }\n }\n }\n",
17272
17253
  "line": {
17273
- "start": 53,
17274
- "end": 119
17254
+ "start": 51,
17255
+ "end": 110
17275
17256
  }
17276
17257
  }
17277
17258
  },
@@ -17280,10 +17261,10 @@
17280
17261
  "context": {
17281
17262
  "type": "mixin",
17282
17263
  "name": "styles",
17283
- "code": "\n @include utils.file-header('component', 'button');\n\n $prefix: selector.class(\"button\");\n // $printContextual: get(\"contextual-classes\");\n // $classContextual: \"#{ selector.class(\"button-inside\") } ;\n $icon-selector: \"#{ $prefix }--icon\";\n $printDescendant: \"#{ $prefix }--icon\";\n\n #{ $prefix } {\n @include button.default();\n }\n #{ $prefix }--fit {\n min-width: 0;\n }\n #{ $prefix }__icon {\n &:not(:first-child) { \n margin-inline-start: get(\"icon-margin\"); \n }\n &:not(:last-child) { \n margin-inline-end: get(\"icon-margin\"); \n }\n }\n \n @each $size, $values in button.$sizes {\n #{ $prefix }--#{$size} {\n @include button.size($size);\n }\n }\n \n @each $style, $values in button.$styles {\n #{ $prefix }--#{$style} {\n @include button.style($style);\n }\n }\n \n #{ $icon-selector } {\n \n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 0;\n max-width: none;\n border-radius: button.get(\"icon-border-radius\");\n font-size: button.get(\"icon-font-size\");\n width: button.get(\"icon-size\");\n height: button.get(\"icon-size\");\n padding: 0 !important;\n\n #{ $prefix }__icon {\n transform: translateY(get(\"icon-centered-vertical-offset\"));\n margin: 0;\n }\n }\n\n @each $size, $values in button.$sizes {\n $icon-size: map.get($values, \"icon-size\");\n $icon-font-size: map.get($values, \"icon-font-size\");\n @if ($icon-size or $icon-font-size) {\n #{ $prefix }--#{$size}#{ $icon-selector } {\n width: $icon-size;\n height: $icon-size;\n font-size: $icon-font-size;\n }\n }\n }\n",
17264
+ "code": "\n @include utils.file-header('component', 'button');\n\n $prefix: selector.class(\"button\");\n // $printContextual: get(\"contextual-classes\");\n // $classContextual: \"#{ selector.class(\"button-inside\") } ;\n $icon-selector: \"#{ $prefix }--icon\";\n $printDescendant: \"#{ $prefix }--icon\";\n\n #{ $prefix } {\n @include button.default();\n }\n #{ $prefix }--fit {\n min-width: 0;\n }\n #{ $prefix }--left {\n justify-content: flex-start;\n text-align: left;\n }\n \n @each $size, $values in button.$sizes {\n #{ $prefix }--#{$size} {\n @include button.size($size);\n }\n }\n \n @each $style, $values in button.$styles {\n #{ $prefix }--#{$style} {\n @include button.style($style);\n }\n }\n \n #{ $icon-selector } {\n \n min-width: 0;\n max-width: none;\n border-radius: button.get(\"icon-border-radius\");\n font-size: button.get(\"icon-font-size\");\n width: button.get(\"icon-size\");\n height: button.get(\"icon-size\");\n padding: 0 !important;\n\n #{ $prefix }__icon {\n transform: translateY(get(\"icon-centered-vertical-offset\"));\n margin: 0;\n }\n }\n\n @each $size, $values in button.$sizes {\n $icon-size: map.get($values, \"icon-size\");\n $icon-font-size: map.get($values, \"icon-font-size\");\n @if ($icon-size or $icon-font-size) {\n #{ $prefix }--#{$size}#{ $icon-selector } {\n width: $icon-size;\n height: $icon-size;\n font-size: $icon-font-size;\n }\n }\n }\n",
17284
17265
  "line": {
17285
- "start": 53,
17286
- "end": 119
17266
+ "start": 51,
17267
+ "end": 110
17287
17268
  }
17288
17269
  }
17289
17270
  },
@@ -17292,10 +17273,10 @@
17292
17273
  "context": {
17293
17274
  "type": "mixin",
17294
17275
  "name": "styles",
17295
- "code": "\n @include utils.file-header('component', 'button');\n\n $prefix: selector.class(\"button\");\n // $printContextual: get(\"contextual-classes\");\n // $classContextual: \"#{ selector.class(\"button-inside\") } ;\n $icon-selector: \"#{ $prefix }--icon\";\n $printDescendant: \"#{ $prefix }--icon\";\n\n #{ $prefix } {\n @include button.default();\n }\n #{ $prefix }--fit {\n min-width: 0;\n }\n #{ $prefix }__icon {\n &:not(:first-child) { \n margin-inline-start: get(\"icon-margin\"); \n }\n &:not(:last-child) { \n margin-inline-end: get(\"icon-margin\"); \n }\n }\n \n @each $size, $values in button.$sizes {\n #{ $prefix }--#{$size} {\n @include button.size($size);\n }\n }\n \n @each $style, $values in button.$styles {\n #{ $prefix }--#{$style} {\n @include button.style($style);\n }\n }\n \n #{ $icon-selector } {\n \n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 0;\n max-width: none;\n border-radius: button.get(\"icon-border-radius\");\n font-size: button.get(\"icon-font-size\");\n width: button.get(\"icon-size\");\n height: button.get(\"icon-size\");\n padding: 0 !important;\n\n #{ $prefix }__icon {\n transform: translateY(get(\"icon-centered-vertical-offset\"));\n margin: 0;\n }\n }\n\n @each $size, $values in button.$sizes {\n $icon-size: map.get($values, \"icon-size\");\n $icon-font-size: map.get($values, \"icon-font-size\");\n @if ($icon-size or $icon-font-size) {\n #{ $prefix }--#{$size}#{ $icon-selector } {\n width: $icon-size;\n height: $icon-size;\n font-size: $icon-font-size;\n }\n }\n }\n",
17276
+ "code": "\n @include utils.file-header('component', 'button');\n\n $prefix: selector.class(\"button\");\n // $printContextual: get(\"contextual-classes\");\n // $classContextual: \"#{ selector.class(\"button-inside\") } ;\n $icon-selector: \"#{ $prefix }--icon\";\n $printDescendant: \"#{ $prefix }--icon\";\n\n #{ $prefix } {\n @include button.default();\n }\n #{ $prefix }--fit {\n min-width: 0;\n }\n #{ $prefix }--left {\n justify-content: flex-start;\n text-align: left;\n }\n \n @each $size, $values in button.$sizes {\n #{ $prefix }--#{$size} {\n @include button.size($size);\n }\n }\n \n @each $style, $values in button.$styles {\n #{ $prefix }--#{$style} {\n @include button.style($style);\n }\n }\n \n #{ $icon-selector } {\n \n min-width: 0;\n max-width: none;\n border-radius: button.get(\"icon-border-radius\");\n font-size: button.get(\"icon-font-size\");\n width: button.get(\"icon-size\");\n height: button.get(\"icon-size\");\n padding: 0 !important;\n\n #{ $prefix }__icon {\n transform: translateY(get(\"icon-centered-vertical-offset\"));\n margin: 0;\n }\n }\n\n @each $size, $values in button.$sizes {\n $icon-size: map.get($values, \"icon-size\");\n $icon-font-size: map.get($values, \"icon-font-size\");\n @if ($icon-size or $icon-font-size) {\n #{ $prefix }--#{$size}#{ $icon-selector } {\n width: $icon-size;\n height: $icon-size;\n font-size: $icon-font-size;\n }\n }\n }\n",
17296
17277
  "line": {
17297
- "start": 53,
17298
- "end": 119
17278
+ "start": 51,
17279
+ "end": 110
17299
17280
  }
17300
17281
  }
17301
17282
  },
@@ -17304,10 +17285,10 @@
17304
17285
  "context": {
17305
17286
  "type": "mixin",
17306
17287
  "name": "styles",
17307
- "code": "\n @include utils.file-header('component', 'button');\n\n $prefix: selector.class(\"button\");\n // $printContextual: get(\"contextual-classes\");\n // $classContextual: \"#{ selector.class(\"button-inside\") } ;\n $icon-selector: \"#{ $prefix }--icon\";\n $printDescendant: \"#{ $prefix }--icon\";\n\n #{ $prefix } {\n @include button.default();\n }\n #{ $prefix }--fit {\n min-width: 0;\n }\n #{ $prefix }__icon {\n &:not(:first-child) { \n margin-inline-start: get(\"icon-margin\"); \n }\n &:not(:last-child) { \n margin-inline-end: get(\"icon-margin\"); \n }\n }\n \n @each $size, $values in button.$sizes {\n #{ $prefix }--#{$size} {\n @include button.size($size);\n }\n }\n \n @each $style, $values in button.$styles {\n #{ $prefix }--#{$style} {\n @include button.style($style);\n }\n }\n \n #{ $icon-selector } {\n \n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 0;\n max-width: none;\n border-radius: button.get(\"icon-border-radius\");\n font-size: button.get(\"icon-font-size\");\n width: button.get(\"icon-size\");\n height: button.get(\"icon-size\");\n padding: 0 !important;\n\n #{ $prefix }__icon {\n transform: translateY(get(\"icon-centered-vertical-offset\"));\n margin: 0;\n }\n }\n\n @each $size, $values in button.$sizes {\n $icon-size: map.get($values, \"icon-size\");\n $icon-font-size: map.get($values, \"icon-font-size\");\n @if ($icon-size or $icon-font-size) {\n #{ $prefix }--#{$size}#{ $icon-selector } {\n width: $icon-size;\n height: $icon-size;\n font-size: $icon-font-size;\n }\n }\n }\n",
17288
+ "code": "\n @include utils.file-header('component', 'button');\n\n $prefix: selector.class(\"button\");\n // $printContextual: get(\"contextual-classes\");\n // $classContextual: \"#{ selector.class(\"button-inside\") } ;\n $icon-selector: \"#{ $prefix }--icon\";\n $printDescendant: \"#{ $prefix }--icon\";\n\n #{ $prefix } {\n @include button.default();\n }\n #{ $prefix }--fit {\n min-width: 0;\n }\n #{ $prefix }--left {\n justify-content: flex-start;\n text-align: left;\n }\n \n @each $size, $values in button.$sizes {\n #{ $prefix }--#{$size} {\n @include button.size($size);\n }\n }\n \n @each $style, $values in button.$styles {\n #{ $prefix }--#{$style} {\n @include button.style($style);\n }\n }\n \n #{ $icon-selector } {\n \n min-width: 0;\n max-width: none;\n border-radius: button.get(\"icon-border-radius\");\n font-size: button.get(\"icon-font-size\");\n width: button.get(\"icon-size\");\n height: button.get(\"icon-size\");\n padding: 0 !important;\n\n #{ $prefix }__icon {\n transform: translateY(get(\"icon-centered-vertical-offset\"));\n margin: 0;\n }\n }\n\n @each $size, $values in button.$sizes {\n $icon-size: map.get($values, \"icon-size\");\n $icon-font-size: map.get($values, \"icon-font-size\");\n @if ($icon-size or $icon-font-size) {\n #{ $prefix }--#{$size}#{ $icon-selector } {\n width: $icon-size;\n height: $icon-size;\n font-size: $icon-font-size;\n }\n }\n }\n",
17308
17289
  "line": {
17309
- "start": 53,
17310
- "end": 119
17290
+ "start": 51,
17291
+ "end": 110
17311
17292
  }
17312
17293
  }
17313
17294
  },
@@ -32306,10 +32287,10 @@
32306
32287
  "context": {
32307
32288
  "type": "mixin",
32308
32289
  "name": "styles",
32309
- "code": "\n @include utils.file-header('component', 'button');\n\n $prefix: selector.class(\"button\");\n // $printContextual: get(\"contextual-classes\");\n // $classContextual: \"#{ selector.class(\"button-inside\") } ;\n $icon-selector: \"#{ $prefix }--icon\";\n $printDescendant: \"#{ $prefix }--icon\";\n\n #{ $prefix } {\n @include button.default();\n }\n #{ $prefix }--fit {\n min-width: 0;\n }\n #{ $prefix }__icon {\n &:not(:first-child) { \n margin-inline-start: get(\"icon-margin\"); \n }\n &:not(:last-child) { \n margin-inline-end: get(\"icon-margin\"); \n }\n }\n \n @each $size, $values in button.$sizes {\n #{ $prefix }--#{$size} {\n @include button.size($size);\n }\n }\n \n @each $style, $values in button.$styles {\n #{ $prefix }--#{$style} {\n @include button.style($style);\n }\n }\n \n #{ $icon-selector } {\n \n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 0;\n max-width: none;\n border-radius: button.get(\"icon-border-radius\");\n font-size: button.get(\"icon-font-size\");\n width: button.get(\"icon-size\");\n height: button.get(\"icon-size\");\n padding: 0 !important;\n\n #{ $prefix }__icon {\n transform: translateY(get(\"icon-centered-vertical-offset\"));\n margin: 0;\n }\n }\n\n @each $size, $values in button.$sizes {\n $icon-size: map.get($values, \"icon-size\");\n $icon-font-size: map.get($values, \"icon-font-size\");\n @if ($icon-size or $icon-font-size) {\n #{ $prefix }--#{$size}#{ $icon-selector } {\n width: $icon-size;\n height: $icon-size;\n font-size: $icon-font-size;\n }\n }\n }\n",
32290
+ "code": "\n @include utils.file-header('component', 'button');\n\n $prefix: selector.class(\"button\");\n // $printContextual: get(\"contextual-classes\");\n // $classContextual: \"#{ selector.class(\"button-inside\") } ;\n $icon-selector: \"#{ $prefix }--icon\";\n $printDescendant: \"#{ $prefix }--icon\";\n\n #{ $prefix } {\n @include button.default();\n }\n #{ $prefix }--fit {\n min-width: 0;\n }\n #{ $prefix }--left {\n justify-content: flex-start;\n text-align: left;\n }\n \n @each $size, $values in button.$sizes {\n #{ $prefix }--#{$size} {\n @include button.size($size);\n }\n }\n \n @each $style, $values in button.$styles {\n #{ $prefix }--#{$style} {\n @include button.style($style);\n }\n }\n \n #{ $icon-selector } {\n \n min-width: 0;\n max-width: none;\n border-radius: button.get(\"icon-border-radius\");\n font-size: button.get(\"icon-font-size\");\n width: button.get(\"icon-size\");\n height: button.get(\"icon-size\");\n padding: 0 !important;\n\n #{ $prefix }__icon {\n transform: translateY(get(\"icon-centered-vertical-offset\"));\n margin: 0;\n }\n }\n\n @each $size, $values in button.$sizes {\n $icon-size: map.get($values, \"icon-size\");\n $icon-font-size: map.get($values, \"icon-font-size\");\n @if ($icon-size or $icon-font-size) {\n #{ $prefix }--#{$size}#{ $icon-selector } {\n width: $icon-size;\n height: $icon-size;\n font-size: $icon-font-size;\n }\n }\n }\n",
32310
32291
  "line": {
32311
- "start": 53,
32312
- "end": 119
32292
+ "start": 51,
32293
+ "end": 110
32313
32294
  }
32314
32295
  }
32315
32296
  },
@@ -32318,10 +32299,10 @@
32318
32299
  "context": {
32319
32300
  "type": "mixin",
32320
32301
  "name": "styles",
32321
- "code": "\n @include utils.file-header('component', 'button');\n\n $prefix: selector.class(\"button\");\n // $printContextual: get(\"contextual-classes\");\n // $classContextual: \"#{ selector.class(\"button-inside\") } ;\n $icon-selector: \"#{ $prefix }--icon\";\n $printDescendant: \"#{ $prefix }--icon\";\n\n #{ $prefix } {\n @include button.default();\n }\n #{ $prefix }--fit {\n min-width: 0;\n }\n #{ $prefix }__icon {\n &:not(:first-child) { \n margin-inline-start: get(\"icon-margin\"); \n }\n &:not(:last-child) { \n margin-inline-end: get(\"icon-margin\"); \n }\n }\n \n @each $size, $values in button.$sizes {\n #{ $prefix }--#{$size} {\n @include button.size($size);\n }\n }\n \n @each $style, $values in button.$styles {\n #{ $prefix }--#{$style} {\n @include button.style($style);\n }\n }\n \n #{ $icon-selector } {\n \n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 0;\n max-width: none;\n border-radius: button.get(\"icon-border-radius\");\n font-size: button.get(\"icon-font-size\");\n width: button.get(\"icon-size\");\n height: button.get(\"icon-size\");\n padding: 0 !important;\n\n #{ $prefix }__icon {\n transform: translateY(get(\"icon-centered-vertical-offset\"));\n margin: 0;\n }\n }\n\n @each $size, $values in button.$sizes {\n $icon-size: map.get($values, \"icon-size\");\n $icon-font-size: map.get($values, \"icon-font-size\");\n @if ($icon-size or $icon-font-size) {\n #{ $prefix }--#{$size}#{ $icon-selector } {\n width: $icon-size;\n height: $icon-size;\n font-size: $icon-font-size;\n }\n }\n }\n",
32302
+ "code": "\n @include utils.file-header('component', 'button');\n\n $prefix: selector.class(\"button\");\n // $printContextual: get(\"contextual-classes\");\n // $classContextual: \"#{ selector.class(\"button-inside\") } ;\n $icon-selector: \"#{ $prefix }--icon\";\n $printDescendant: \"#{ $prefix }--icon\";\n\n #{ $prefix } {\n @include button.default();\n }\n #{ $prefix }--fit {\n min-width: 0;\n }\n #{ $prefix }--left {\n justify-content: flex-start;\n text-align: left;\n }\n \n @each $size, $values in button.$sizes {\n #{ $prefix }--#{$size} {\n @include button.size($size);\n }\n }\n \n @each $style, $values in button.$styles {\n #{ $prefix }--#{$style} {\n @include button.style($style);\n }\n }\n \n #{ $icon-selector } {\n \n min-width: 0;\n max-width: none;\n border-radius: button.get(\"icon-border-radius\");\n font-size: button.get(\"icon-font-size\");\n width: button.get(\"icon-size\");\n height: button.get(\"icon-size\");\n padding: 0 !important;\n\n #{ $prefix }__icon {\n transform: translateY(get(\"icon-centered-vertical-offset\"));\n margin: 0;\n }\n }\n\n @each $size, $values in button.$sizes {\n $icon-size: map.get($values, \"icon-size\");\n $icon-font-size: map.get($values, \"icon-font-size\");\n @if ($icon-size or $icon-font-size) {\n #{ $prefix }--#{$size}#{ $icon-selector } {\n width: $icon-size;\n height: $icon-size;\n font-size: $icon-font-size;\n }\n }\n }\n",
32322
32303
  "line": {
32323
- "start": 53,
32324
- "end": 119
32304
+ "start": 51,
32305
+ "end": 110
32325
32306
  }
32326
32307
  }
32327
32308
  },
@@ -33670,7 +33651,7 @@
33670
33651
  "context": {
33671
33652
  "type": "variable",
33672
33653
  "name": "config",
33673
- "value": "(\n \"active-selector\": \"&.is-active\",\n \"box-shadow\": true,\n \"line-height\": 1.1,\n \"letter-spacing\": 0.02em,\n \"margin\": (0.45em 0.5em 0.45em 0),\n \"min-width\": 9rem,\n \"padding\": (0.75em 1.5em),\n \"white-space\": nowrap,\n \"border-color\": \"control-border\",\n \"border-color-active\": \"control-border-active\",\n \"border-color-hover\": \"control-border-hover\",\n \"border-radius\": 2rem,\n \"border-width\": 1px,\n \"background-color\": \"control-background\",\n \"background-color-hover\": \"control-background-hover\",\n \"background-color-active\": \"control-background-active\",\n \"color\": \"control\",\n \"color-hover\": \"control-hover\",\n \"color-active\": \"control-active\",\n \"font-family\": inherit,\n \"font-weight\": bold,\n \"font-size\": \"base\",\n \"icon-size\": 2.5rem,\n \"icon-font-size\": 1.38rem,\n \"icon-border-radius\": 50%,\n \"text-shadow\": none,\n \"text-transform\": none,\n \"text-decoration\": none,\n \"transition-enabled\": true,\n \"transition-duration\": 200ms,\n \"transition-properties\": (border-color, background-color, color, box-shadow),\n \"button-icon-offset\": true,\n)",
33654
+ "value": "(\n \"active-selector\": \"&.is-active\",\n \"box-shadow\": true,\n \"line-height\": 1.1,\n \"letter-spacing\": 0.02em,\n \"margin\": (0.45em 0.5em 0.45em 0),\n \"min-width\": 9rem,\n \"padding\": (0.75em 1.5em),\n \"white-space\": nowrap,\n \"border-color\": \"control-border\",\n \"border-color-active\": \"control-border-active\",\n \"border-color-hover\": \"control-border-hover\",\n \"border-radius\": 2rem,\n \"border-width\": 1px,\n \"background-color\": \"control-background\",\n \"background-color-hover\": \"control-background-hover\",\n \"background-color-active\": \"control-background-active\",\n \"color\": \"control\",\n \"color-hover\": \"control-hover\",\n \"color-active\": \"control-active\",\n \"font-family\": inherit,\n \"font-weight\": bold,\n \"font-size\": \"base\",\n \"icon-size\": 2.5rem,\n \"icon-font-size\": 1.38rem,\n \"icon-border-radius\": 50%,\n \"text-shadow\": none,\n \"text-transform\": none,\n \"text-decoration\": none,\n \"transition-enabled\": true,\n \"transition-duration\": 200ms,\n \"transition-properties\": (border-color, background-color, color, box-shadow),\n \"gap\": 0.5em,\n)",
33674
33655
  "scope": "default",
33675
33656
  "line": {
33676
33657
  "start": 55,
@@ -33965,8 +33946,8 @@
33965
33946
  "name": "get-style-value",
33966
33947
  "code": "\n $style: utils.require-map-get($styles, $name, 'button [color value]');\n $state-style: ();\n // If a specific state [hover, active] grab that map\n @if ($state) {\n $state-style: map.get($style, $state);\n $state-style: utils.when($state-style, $state-style, ());\n }\n // From is the map to grab styles from\n $from: utils.when($state, $state-style, $style);\n $value: map.get($from, $prop);\n\n // Fallback to parent (if hover)\n @if ($state == \"hover\") {\n $value: utils.when($value, $value, map.get($style, $prop)); \n }\n\n @if (meta.type-of($value) == \"string\" and string.index($prop, \"color\")) {\n @return color.get($value);\n } @else {\n @return $value;\n }\n",
33967
33948
  "line": {
33968
- "start": 294,
33969
- "end": 316
33949
+ "start": 296,
33950
+ "end": 318
33970
33951
  }
33971
33952
  }
33972
33953
  }
@@ -34225,10 +34206,10 @@
34225
34206
  "context": {
34226
34207
  "type": "mixin",
34227
34208
  "name": "default",
34228
- "code": "\n $font-size: get(\"font-size\");\n @if ($with-reset) {\n @include reset();\n }\n appearance: none; // If used with select for example\n display: inline-block;\n text-transform: get(\"text-transform\");\n text-align: center;\n text-shadow: get(\"text-shadow\");\n vertical-align: middle;\n font-family: get(\"font-family\");\n font-weight: get(\"font-weight\");\n @if ($font-size) {\n @include typography.size($font-size, null, true);\n }\n border-radius: get(\"border-radius\");\n // Removed not sure why it was needed, effects buttons with \n // borders (rendering between bg and border)\n // background-clip: padding-box; \n padding: get(\"padding\");\n line-height: get(\"line-height\");\n letter-spacing: get(\"letter-spacing\");\n box-shadow: get(\"box-shadow\");\n margin: get(\"margin\");\n min-width: get(\"min-width\");\n white-space: get(\"white-space\");\n max-width: 100%; // Questionable, not sure if it's needed\n flex-shrink: 0; \n // Should override link visited coloring\n \n @if get(\"transition-enabled\") {\n transition-duration: get(\"transition-duration\");\n transition-property: get(\"transition-properties\");\n }\n &,\n &:visited {\n color: color.get(get(\"color\"));\n border: get(\"border-width\") solid color.get(get(\"border-color\"));\n background-color: color.get(get(\"background-color\"));\n text-decoration: get(\"text-decoration\");\n }\n &:last-child {\n margin-right: 0;\n }\n &:hover,\n &:focus {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n border-color: color.get(get(\"border-color-hover\"));\n text-decoration: get(\"text-decoration\");\n }\n @include when-active() {\n color: color.get(get(\"color-active\"));\n background-color: color.get(get(\"background-color-active\"));\n border-color: color.get(get(\"border-color-active\"));\n }\n",
34209
+ "code": "\n $font-size: get(\"font-size\");\n @if ($with-reset) {\n @include reset();\n }\n appearance: none; // If used with select for example\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: get(\"gap\");\n text-transform: get(\"text-transform\");\n text-shadow: get(\"text-shadow\");\n vertical-align: middle;\n font-family: get(\"font-family\");\n font-weight: get(\"font-weight\");\n @if ($font-size) {\n @include typography.size($font-size, null, true);\n }\n border-radius: get(\"border-radius\");\n // Removed not sure why it was needed, effects buttons with \n // borders (rendering between bg and border)\n // background-clip: padding-box; \n padding: get(\"padding\");\n line-height: get(\"line-height\");\n letter-spacing: get(\"letter-spacing\");\n box-shadow: get(\"box-shadow\");\n margin: get(\"margin\");\n min-width: get(\"min-width\");\n white-space: get(\"white-space\");\n max-width: 100%; // Questionable, not sure if it's needed\n flex-shrink: 0; \n // Should override link visited coloring\n \n @if get(\"transition-enabled\") {\n transition-duration: get(\"transition-duration\");\n transition-property: get(\"transition-properties\");\n }\n &,\n &:visited {\n color: color.get(get(\"color\"));\n border: get(\"border-width\") solid color.get(get(\"border-color\"));\n background-color: color.get(get(\"background-color\"));\n text-decoration: get(\"text-decoration\");\n }\n &:last-child {\n margin-right: 0;\n }\n &:hover,\n &:focus {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n border-color: color.get(get(\"border-color-hover\"));\n text-decoration: get(\"text-decoration\");\n }\n @include when-active() {\n color: color.get(get(\"color-active\"));\n background-color: color.get(get(\"background-color-active\"));\n border-color: color.get(get(\"border-color-active\"));\n }\n",
34229
34210
  "line": {
34230
34211
  "start": 196,
34231
- "end": 253
34212
+ "end": 255
34232
34213
  }
34233
34214
  }
34234
34215
  }
@@ -34247,10 +34228,10 @@
34247
34228
  "context": {
34248
34229
  "type": "mixin",
34249
34230
  "name": "default",
34250
- "code": "\n $font-size: get(\"font-size\");\n @if ($with-reset) {\n @include reset();\n }\n appearance: none; // If used with select for example\n display: inline-block;\n text-transform: get(\"text-transform\");\n text-align: center;\n text-shadow: get(\"text-shadow\");\n vertical-align: middle;\n font-family: get(\"font-family\");\n font-weight: get(\"font-weight\");\n @if ($font-size) {\n @include typography.size($font-size, null, true);\n }\n border-radius: get(\"border-radius\");\n // Removed not sure why it was needed, effects buttons with \n // borders (rendering between bg and border)\n // background-clip: padding-box; \n padding: get(\"padding\");\n line-height: get(\"line-height\");\n letter-spacing: get(\"letter-spacing\");\n box-shadow: get(\"box-shadow\");\n margin: get(\"margin\");\n min-width: get(\"min-width\");\n white-space: get(\"white-space\");\n max-width: 100%; // Questionable, not sure if it's needed\n flex-shrink: 0; \n // Should override link visited coloring\n \n @if get(\"transition-enabled\") {\n transition-duration: get(\"transition-duration\");\n transition-property: get(\"transition-properties\");\n }\n &,\n &:visited {\n color: color.get(get(\"color\"));\n border: get(\"border-width\") solid color.get(get(\"border-color\"));\n background-color: color.get(get(\"background-color\"));\n text-decoration: get(\"text-decoration\");\n }\n &:last-child {\n margin-right: 0;\n }\n &:hover,\n &:focus {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n border-color: color.get(get(\"border-color-hover\"));\n text-decoration: get(\"text-decoration\");\n }\n @include when-active() {\n color: color.get(get(\"color-active\"));\n background-color: color.get(get(\"background-color-active\"));\n border-color: color.get(get(\"border-color-active\"));\n }\n",
34231
+ "code": "\n $font-size: get(\"font-size\");\n @if ($with-reset) {\n @include reset();\n }\n appearance: none; // If used with select for example\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: get(\"gap\");\n text-transform: get(\"text-transform\");\n text-shadow: get(\"text-shadow\");\n vertical-align: middle;\n font-family: get(\"font-family\");\n font-weight: get(\"font-weight\");\n @if ($font-size) {\n @include typography.size($font-size, null, true);\n }\n border-radius: get(\"border-radius\");\n // Removed not sure why it was needed, effects buttons with \n // borders (rendering between bg and border)\n // background-clip: padding-box; \n padding: get(\"padding\");\n line-height: get(\"line-height\");\n letter-spacing: get(\"letter-spacing\");\n box-shadow: get(\"box-shadow\");\n margin: get(\"margin\");\n min-width: get(\"min-width\");\n white-space: get(\"white-space\");\n max-width: 100%; // Questionable, not sure if it's needed\n flex-shrink: 0; \n // Should override link visited coloring\n \n @if get(\"transition-enabled\") {\n transition-duration: get(\"transition-duration\");\n transition-property: get(\"transition-properties\");\n }\n &,\n &:visited {\n color: color.get(get(\"color\"));\n border: get(\"border-width\") solid color.get(get(\"border-color\"));\n background-color: color.get(get(\"background-color\"));\n text-decoration: get(\"text-decoration\");\n }\n &:last-child {\n margin-right: 0;\n }\n &:hover,\n &:focus {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n border-color: color.get(get(\"border-color-hover\"));\n text-decoration: get(\"text-decoration\");\n }\n @include when-active() {\n color: color.get(get(\"color-active\"));\n background-color: color.get(get(\"background-color-active\"));\n border-color: color.get(get(\"border-color-active\"));\n }\n",
34251
34232
  "line": {
34252
34233
  "start": 196,
34253
- "end": 253
34234
+ "end": 255
34254
34235
  }
34255
34236
  },
34256
34237
  "parameter": [
@@ -34418,6 +34399,10 @@
34418
34399
  "type": "function",
34419
34400
  "name": "get"
34420
34401
  },
34402
+ {
34403
+ "type": "function",
34404
+ "name": "get"
34405
+ },
34421
34406
  {
34422
34407
  "type": "function",
34423
34408
  "name": "get"
@@ -34435,16 +34420,16 @@
34435
34420
  "path": "/sass/core/button/#mixin-when-active",
34436
34421
  "description": "Mixin to wrap in active selectors\n- Use to match the button's active selector\n",
34437
34422
  "commentRange": {
34438
- "start": 255,
34439
- "end": 263
34423
+ "start": 257,
34424
+ "end": 265
34440
34425
  },
34441
34426
  "context": {
34442
34427
  "type": "mixin",
34443
34428
  "name": "when-active",
34444
34429
  "code": "\n #{ get(\"active-selector\") } {\n @content;\n }\n",
34445
34430
  "line": {
34446
- "start": 265,
34447
- "end": 269
34431
+ "start": 267,
34432
+ "end": 271
34448
34433
  }
34449
34434
  },
34450
34435
  "example": [
@@ -34474,10 +34459,10 @@
34474
34459
  "context": {
34475
34460
  "type": "mixin",
34476
34461
  "name": "default",
34477
- "code": "\n $font-size: get(\"font-size\");\n @if ($with-reset) {\n @include reset();\n }\n appearance: none; // If used with select for example\n display: inline-block;\n text-transform: get(\"text-transform\");\n text-align: center;\n text-shadow: get(\"text-shadow\");\n vertical-align: middle;\n font-family: get(\"font-family\");\n font-weight: get(\"font-weight\");\n @if ($font-size) {\n @include typography.size($font-size, null, true);\n }\n border-radius: get(\"border-radius\");\n // Removed not sure why it was needed, effects buttons with \n // borders (rendering between bg and border)\n // background-clip: padding-box; \n padding: get(\"padding\");\n line-height: get(\"line-height\");\n letter-spacing: get(\"letter-spacing\");\n box-shadow: get(\"box-shadow\");\n margin: get(\"margin\");\n min-width: get(\"min-width\");\n white-space: get(\"white-space\");\n max-width: 100%; // Questionable, not sure if it's needed\n flex-shrink: 0; \n // Should override link visited coloring\n \n @if get(\"transition-enabled\") {\n transition-duration: get(\"transition-duration\");\n transition-property: get(\"transition-properties\");\n }\n &,\n &:visited {\n color: color.get(get(\"color\"));\n border: get(\"border-width\") solid color.get(get(\"border-color\"));\n background-color: color.get(get(\"background-color\"));\n text-decoration: get(\"text-decoration\");\n }\n &:last-child {\n margin-right: 0;\n }\n &:hover,\n &:focus {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n border-color: color.get(get(\"border-color-hover\"));\n text-decoration: get(\"text-decoration\");\n }\n @include when-active() {\n color: color.get(get(\"color-active\"));\n background-color: color.get(get(\"background-color-active\"));\n border-color: color.get(get(\"border-color-active\"));\n }\n",
34462
+ "code": "\n $font-size: get(\"font-size\");\n @if ($with-reset) {\n @include reset();\n }\n appearance: none; // If used with select for example\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: get(\"gap\");\n text-transform: get(\"text-transform\");\n text-shadow: get(\"text-shadow\");\n vertical-align: middle;\n font-family: get(\"font-family\");\n font-weight: get(\"font-weight\");\n @if ($font-size) {\n @include typography.size($font-size, null, true);\n }\n border-radius: get(\"border-radius\");\n // Removed not sure why it was needed, effects buttons with \n // borders (rendering between bg and border)\n // background-clip: padding-box; \n padding: get(\"padding\");\n line-height: get(\"line-height\");\n letter-spacing: get(\"letter-spacing\");\n box-shadow: get(\"box-shadow\");\n margin: get(\"margin\");\n min-width: get(\"min-width\");\n white-space: get(\"white-space\");\n max-width: 100%; // Questionable, not sure if it's needed\n flex-shrink: 0; \n // Should override link visited coloring\n \n @if get(\"transition-enabled\") {\n transition-duration: get(\"transition-duration\");\n transition-property: get(\"transition-properties\");\n }\n &,\n &:visited {\n color: color.get(get(\"color\"));\n border: get(\"border-width\") solid color.get(get(\"border-color\"));\n background-color: color.get(get(\"background-color\"));\n text-decoration: get(\"text-decoration\");\n }\n &:last-child {\n margin-right: 0;\n }\n &:hover,\n &:focus {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n border-color: color.get(get(\"border-color-hover\"));\n text-decoration: get(\"text-decoration\");\n }\n @include when-active() {\n color: color.get(get(\"color-active\"));\n background-color: color.get(get(\"background-color-active\"));\n border-color: color.get(get(\"border-color-active\"));\n }\n",
34478
34463
  "line": {
34479
34464
  "start": 196,
34480
- "end": 253
34465
+ "end": 255
34481
34466
  }
34482
34467
  }
34483
34468
  },
@@ -34488,8 +34473,8 @@
34488
34473
  "name": "style",
34489
34474
  "code": "\n @if ($no-visited) {\n @include style-styles($name);\n } @else {\n &,\n &:visited {\n @include style-styles($name);\n }\n }\n &:hover,\n &:focus {\n @include style-styles-hover($name);\n }\n @include when-active() {\n @include style-styles-active($name);\n }\n",
34490
34475
  "line": {
34491
- "start": 372,
34492
- "end": 388
34476
+ "start": 374,
34477
+ "end": 390
34493
34478
  }
34494
34479
  }
34495
34480
  }
@@ -34502,16 +34487,16 @@
34502
34487
  "path": "/sass/core/button/#mixin-size",
34503
34488
  "description": "Print button size styles for a specific size\n",
34504
34489
  "commentRange": {
34505
- "start": 271,
34506
- "end": 274
34490
+ "start": 273,
34491
+ "end": 276
34507
34492
  },
34508
34493
  "context": {
34509
34494
  "type": "mixin",
34510
34495
  "name": "size",
34511
34496
  "code": "\n $size: utils.require-map-get($sizes, $name, 'button [size]');\n $font-size: map.get($size, \"font-size\");\n padding: map.get($size, \"padding\");\n border-radius: map.get($size, \"border-radius\");\n border-width: map.get($size, \"border-width\");\n min-width: map.get($size, \"min-width\");\n @if $font-size {\n @include typography.size($font-size);\n }\n",
34512
34497
  "line": {
34513
- "start": 276,
34514
- "end": 286
34498
+ "start": 278,
34499
+ "end": 288
34515
34500
  }
34516
34501
  },
34517
34502
  "parameter": [
@@ -34614,16 +34599,16 @@
34614
34599
  "path": "/sass/core/button/#function-get-style-value",
34615
34600
  "description": "Get a value from a button style\n",
34616
34601
  "commentRange": {
34617
- "start": 288,
34618
- "end": 292
34602
+ "start": 290,
34603
+ "end": 294
34619
34604
  },
34620
34605
  "context": {
34621
34606
  "type": "function",
34622
34607
  "name": "get-style-value",
34623
34608
  "code": "\n $style: utils.require-map-get($styles, $name, 'button [color value]');\n $state-style: ();\n // If a specific state [hover, active] grab that map\n @if ($state) {\n $state-style: map.get($style, $state);\n $state-style: utils.when($state-style, $state-style, ());\n }\n // From is the map to grab styles from\n $from: utils.when($state, $state-style, $style);\n $value: map.get($from, $prop);\n\n // Fallback to parent (if hover)\n @if ($state == \"hover\") {\n $value: utils.when($value, $value, map.get($style, $prop)); \n }\n\n @if (meta.type-of($value) == \"string\" and string.index($prop, \"color\")) {\n @return color.get($value);\n } @else {\n @return $value;\n }\n",
34624
34609
  "line": {
34625
- "start": 294,
34626
- "end": 316
34610
+ "start": 296,
34611
+ "end": 318
34627
34612
  }
34628
34613
  },
34629
34614
  "parameter": [
@@ -34724,8 +34709,8 @@
34724
34709
  "name": "style-styles",
34725
34710
  "code": "\n background-color: get-style-value($name, \"background-color\");\n color: get-style-value($name, \"color\");\n border-color: get-style-value($name, \"border-color\");\n border-width: get-style-value($name, \"border-width\");\n box-shadow: get-style-value($name, \"box-shadow\");\n text-decoration: get-style-value($name, \"text-decoration\");\n font-weight: get-style-value($name, \"font-weight\");\n @if get-style-value($name, \"transition-duration\") {\n transition-duration: get-style-value($name, \"transition-duration\");\n }\n",
34726
34711
  "line": {
34727
- "start": 325,
34728
- "end": 336
34712
+ "start": 327,
34713
+ "end": 338
34729
34714
  }
34730
34715
  }
34731
34716
  },
@@ -34736,8 +34721,8 @@
34736
34721
  "name": "style-styles",
34737
34722
  "code": "\n background-color: get-style-value($name, \"background-color\");\n color: get-style-value($name, \"color\");\n border-color: get-style-value($name, \"border-color\");\n border-width: get-style-value($name, \"border-width\");\n box-shadow: get-style-value($name, \"box-shadow\");\n text-decoration: get-style-value($name, \"text-decoration\");\n font-weight: get-style-value($name, \"font-weight\");\n @if get-style-value($name, \"transition-duration\") {\n transition-duration: get-style-value($name, \"transition-duration\");\n }\n",
34738
34723
  "line": {
34739
- "start": 325,
34740
- "end": 336
34724
+ "start": 327,
34725
+ "end": 338
34741
34726
  }
34742
34727
  }
34743
34728
  },
@@ -34748,8 +34733,8 @@
34748
34733
  "name": "style-styles",
34749
34734
  "code": "\n background-color: get-style-value($name, \"background-color\");\n color: get-style-value($name, \"color\");\n border-color: get-style-value($name, \"border-color\");\n border-width: get-style-value($name, \"border-width\");\n box-shadow: get-style-value($name, \"box-shadow\");\n text-decoration: get-style-value($name, \"text-decoration\");\n font-weight: get-style-value($name, \"font-weight\");\n @if get-style-value($name, \"transition-duration\") {\n transition-duration: get-style-value($name, \"transition-duration\");\n }\n",
34750
34735
  "line": {
34751
- "start": 325,
34752
- "end": 336
34736
+ "start": 327,
34737
+ "end": 338
34753
34738
  }
34754
34739
  }
34755
34740
  },
@@ -34760,8 +34745,8 @@
34760
34745
  "name": "style-styles",
34761
34746
  "code": "\n background-color: get-style-value($name, \"background-color\");\n color: get-style-value($name, \"color\");\n border-color: get-style-value($name, \"border-color\");\n border-width: get-style-value($name, \"border-width\");\n box-shadow: get-style-value($name, \"box-shadow\");\n text-decoration: get-style-value($name, \"text-decoration\");\n font-weight: get-style-value($name, \"font-weight\");\n @if get-style-value($name, \"transition-duration\") {\n transition-duration: get-style-value($name, \"transition-duration\");\n }\n",
34762
34747
  "line": {
34763
- "start": 325,
34764
- "end": 336
34748
+ "start": 327,
34749
+ "end": 338
34765
34750
  }
34766
34751
  }
34767
34752
  },
@@ -34772,8 +34757,8 @@
34772
34757
  "name": "style-styles",
34773
34758
  "code": "\n background-color: get-style-value($name, \"background-color\");\n color: get-style-value($name, \"color\");\n border-color: get-style-value($name, \"border-color\");\n border-width: get-style-value($name, \"border-width\");\n box-shadow: get-style-value($name, \"box-shadow\");\n text-decoration: get-style-value($name, \"text-decoration\");\n font-weight: get-style-value($name, \"font-weight\");\n @if get-style-value($name, \"transition-duration\") {\n transition-duration: get-style-value($name, \"transition-duration\");\n }\n",
34774
34759
  "line": {
34775
- "start": 325,
34776
- "end": 336
34760
+ "start": 327,
34761
+ "end": 338
34777
34762
  }
34778
34763
  }
34779
34764
  },
@@ -34784,8 +34769,8 @@
34784
34769
  "name": "style-styles",
34785
34770
  "code": "\n background-color: get-style-value($name, \"background-color\");\n color: get-style-value($name, \"color\");\n border-color: get-style-value($name, \"border-color\");\n border-width: get-style-value($name, \"border-width\");\n box-shadow: get-style-value($name, \"box-shadow\");\n text-decoration: get-style-value($name, \"text-decoration\");\n font-weight: get-style-value($name, \"font-weight\");\n @if get-style-value($name, \"transition-duration\") {\n transition-duration: get-style-value($name, \"transition-duration\");\n }\n",
34786
34771
  "line": {
34787
- "start": 325,
34788
- "end": 336
34772
+ "start": 327,
34773
+ "end": 338
34789
34774
  }
34790
34775
  }
34791
34776
  },
@@ -34796,8 +34781,8 @@
34796
34781
  "name": "style-styles",
34797
34782
  "code": "\n background-color: get-style-value($name, \"background-color\");\n color: get-style-value($name, \"color\");\n border-color: get-style-value($name, \"border-color\");\n border-width: get-style-value($name, \"border-width\");\n box-shadow: get-style-value($name, \"box-shadow\");\n text-decoration: get-style-value($name, \"text-decoration\");\n font-weight: get-style-value($name, \"font-weight\");\n @if get-style-value($name, \"transition-duration\") {\n transition-duration: get-style-value($name, \"transition-duration\");\n }\n",
34798
34783
  "line": {
34799
- "start": 325,
34800
- "end": 336
34784
+ "start": 327,
34785
+ "end": 338
34801
34786
  }
34802
34787
  }
34803
34788
  },
@@ -34808,8 +34793,8 @@
34808
34793
  "name": "style-styles",
34809
34794
  "code": "\n background-color: get-style-value($name, \"background-color\");\n color: get-style-value($name, \"color\");\n border-color: get-style-value($name, \"border-color\");\n border-width: get-style-value($name, \"border-width\");\n box-shadow: get-style-value($name, \"box-shadow\");\n text-decoration: get-style-value($name, \"text-decoration\");\n font-weight: get-style-value($name, \"font-weight\");\n @if get-style-value($name, \"transition-duration\") {\n transition-duration: get-style-value($name, \"transition-duration\");\n }\n",
34810
34795
  "line": {
34811
- "start": 325,
34812
- "end": 336
34796
+ "start": 327,
34797
+ "end": 338
34813
34798
  }
34814
34799
  }
34815
34800
  },
@@ -34820,8 +34805,8 @@
34820
34805
  "name": "style-styles",
34821
34806
  "code": "\n background-color: get-style-value($name, \"background-color\");\n color: get-style-value($name, \"color\");\n border-color: get-style-value($name, \"border-color\");\n border-width: get-style-value($name, \"border-width\");\n box-shadow: get-style-value($name, \"box-shadow\");\n text-decoration: get-style-value($name, \"text-decoration\");\n font-weight: get-style-value($name, \"font-weight\");\n @if get-style-value($name, \"transition-duration\") {\n transition-duration: get-style-value($name, \"transition-duration\");\n }\n",
34822
34807
  "line": {
34823
- "start": 325,
34824
- "end": 336
34808
+ "start": 327,
34809
+ "end": 338
34825
34810
  }
34826
34811
  }
34827
34812
  },
@@ -34832,8 +34817,8 @@
34832
34817
  "name": "style-styles-hover",
34833
34818
  "code": "\n background-color: get-style-value($name, \"background-color\", \"hover\");\n color: get-style-value($name, \"color\", \"hover\");\n border-color: get-style-value($name, \"border-color\", \"hover\");\n box-shadow: get-style-value($name, \"box-shadow\", \"hover\");\n text-decoration: get-style-value($name, \"text-decoration\", \"hover\");\n",
34834
34819
  "line": {
34835
- "start": 345,
34836
- "end": 351
34820
+ "start": 347,
34821
+ "end": 353
34837
34822
  }
34838
34823
  }
34839
34824
  },
@@ -34844,8 +34829,8 @@
34844
34829
  "name": "style-styles-hover",
34845
34830
  "code": "\n background-color: get-style-value($name, \"background-color\", \"hover\");\n color: get-style-value($name, \"color\", \"hover\");\n border-color: get-style-value($name, \"border-color\", \"hover\");\n box-shadow: get-style-value($name, \"box-shadow\", \"hover\");\n text-decoration: get-style-value($name, \"text-decoration\", \"hover\");\n",
34846
34831
  "line": {
34847
- "start": 345,
34848
- "end": 351
34832
+ "start": 347,
34833
+ "end": 353
34849
34834
  }
34850
34835
  }
34851
34836
  },
@@ -34856,8 +34841,8 @@
34856
34841
  "name": "style-styles-hover",
34857
34842
  "code": "\n background-color: get-style-value($name, \"background-color\", \"hover\");\n color: get-style-value($name, \"color\", \"hover\");\n border-color: get-style-value($name, \"border-color\", \"hover\");\n box-shadow: get-style-value($name, \"box-shadow\", \"hover\");\n text-decoration: get-style-value($name, \"text-decoration\", \"hover\");\n",
34858
34843
  "line": {
34859
- "start": 345,
34860
- "end": 351
34844
+ "start": 347,
34845
+ "end": 353
34861
34846
  }
34862
34847
  }
34863
34848
  },
@@ -34868,8 +34853,8 @@
34868
34853
  "name": "style-styles-hover",
34869
34854
  "code": "\n background-color: get-style-value($name, \"background-color\", \"hover\");\n color: get-style-value($name, \"color\", \"hover\");\n border-color: get-style-value($name, \"border-color\", \"hover\");\n box-shadow: get-style-value($name, \"box-shadow\", \"hover\");\n text-decoration: get-style-value($name, \"text-decoration\", \"hover\");\n",
34870
34855
  "line": {
34871
- "start": 345,
34872
- "end": 351
34856
+ "start": 347,
34857
+ "end": 353
34873
34858
  }
34874
34859
  }
34875
34860
  },
@@ -34880,8 +34865,8 @@
34880
34865
  "name": "style-styles-hover",
34881
34866
  "code": "\n background-color: get-style-value($name, \"background-color\", \"hover\");\n color: get-style-value($name, \"color\", \"hover\");\n border-color: get-style-value($name, \"border-color\", \"hover\");\n box-shadow: get-style-value($name, \"box-shadow\", \"hover\");\n text-decoration: get-style-value($name, \"text-decoration\", \"hover\");\n",
34882
34867
  "line": {
34883
- "start": 345,
34884
- "end": 351
34868
+ "start": 347,
34869
+ "end": 353
34885
34870
  }
34886
34871
  }
34887
34872
  }
@@ -34894,16 +34879,16 @@
34894
34879
  "path": "/sass/core/button/#mixin-style-styles",
34895
34880
  "description": "Print a button style's base styles (not hover)\n- In most cases you want the style() mixin\n- This is used mainly for trying to match a buttons base styles without including the other state (hover, etc) styles\n",
34896
34881
  "commentRange": {
34897
- "start": 318,
34898
- "end": 323
34882
+ "start": 320,
34883
+ "end": 325
34899
34884
  },
34900
34885
  "context": {
34901
34886
  "type": "mixin",
34902
34887
  "name": "style-styles",
34903
34888
  "code": "\n background-color: get-style-value($name, \"background-color\");\n color: get-style-value($name, \"color\");\n border-color: get-style-value($name, \"border-color\");\n border-width: get-style-value($name, \"border-width\");\n box-shadow: get-style-value($name, \"box-shadow\");\n text-decoration: get-style-value($name, \"text-decoration\");\n font-weight: get-style-value($name, \"font-weight\");\n @if get-style-value($name, \"transition-duration\") {\n transition-duration: get-style-value($name, \"transition-duration\");\n }\n",
34904
34889
  "line": {
34905
- "start": 325,
34906
- "end": 336
34890
+ "start": 327,
34891
+ "end": 338
34907
34892
  }
34908
34893
  },
34909
34894
  "parameter": [
@@ -35000,8 +34985,8 @@
35000
34985
  "name": "style",
35001
34986
  "code": "\n @if ($no-visited) {\n @include style-styles($name);\n } @else {\n &,\n &:visited {\n @include style-styles($name);\n }\n }\n &:hover,\n &:focus {\n @include style-styles-hover($name);\n }\n @include when-active() {\n @include style-styles-active($name);\n }\n",
35002
34987
  "line": {
35003
- "start": 372,
35004
- "end": 388
34988
+ "start": 374,
34989
+ "end": 390
35005
34990
  }
35006
34991
  }
35007
34992
  },
@@ -35012,8 +34997,8 @@
35012
34997
  "name": "style",
35013
34998
  "code": "\n @if ($no-visited) {\n @include style-styles($name);\n } @else {\n &,\n &:visited {\n @include style-styles($name);\n }\n }\n &:hover,\n &:focus {\n @include style-styles-hover($name);\n }\n @include when-active() {\n @include style-styles-active($name);\n }\n",
35014
34999
  "line": {
35015
- "start": 372,
35016
- "end": 388
35000
+ "start": 374,
35001
+ "end": 390
35017
35002
  }
35018
35003
  }
35019
35004
  }
@@ -35026,16 +35011,16 @@
35026
35011
  "path": "/sass/core/button/#mixin-style-styles-hover",
35027
35012
  "description": "Print a button style's base styles (hover styles only)\n- In most cases you want the style() mixin\n- This is used mainly for trying to match a buttons hover styles without including the base styling\n",
35028
35013
  "commentRange": {
35029
- "start": 338,
35030
- "end": 343
35014
+ "start": 340,
35015
+ "end": 345
35031
35016
  },
35032
35017
  "context": {
35033
35018
  "type": "mixin",
35034
35019
  "name": "style-styles-hover",
35035
35020
  "code": "\n background-color: get-style-value($name, \"background-color\", \"hover\");\n color: get-style-value($name, \"color\", \"hover\");\n border-color: get-style-value($name, \"border-color\", \"hover\");\n box-shadow: get-style-value($name, \"box-shadow\", \"hover\");\n text-decoration: get-style-value($name, \"text-decoration\", \"hover\");\n",
35036
35021
  "line": {
35037
- "start": 345,
35038
- "end": 351
35022
+ "start": 347,
35023
+ "end": 353
35039
35024
  }
35040
35025
  },
35041
35026
  "parameter": [
@@ -35116,8 +35101,8 @@
35116
35101
  "name": "style",
35117
35102
  "code": "\n @if ($no-visited) {\n @include style-styles($name);\n } @else {\n &,\n &:visited {\n @include style-styles($name);\n }\n }\n &:hover,\n &:focus {\n @include style-styles-hover($name);\n }\n @include when-active() {\n @include style-styles-active($name);\n }\n",
35118
35103
  "line": {
35119
- "start": 372,
35120
- "end": 388
35104
+ "start": 374,
35105
+ "end": 390
35121
35106
  }
35122
35107
  }
35123
35108
  }
@@ -35130,16 +35115,16 @@
35130
35115
  "path": "/sass/core/button/#mixin-style",
35131
35116
  "description": "Print a button style\n- Includes base/visited styling, and hover/focus state styles\n- To print only one of those states, use style-styles or style-styles-hover\n- By default this mixin prints the buttons base styles along with :visited state. \n This is to avoid link visited states effecting the button styles (if used in editor areas \n or other areas that apply automatic links styling for example. (param below to override behavior)\n",
35132
35117
  "commentRange": {
35133
- "start": 361,
35134
- "end": 370
35118
+ "start": 363,
35119
+ "end": 372
35135
35120
  },
35136
35121
  "context": {
35137
35122
  "type": "mixin",
35138
35123
  "name": "style",
35139
35124
  "code": "\n @if ($no-visited) {\n @include style-styles($name);\n } @else {\n &,\n &:visited {\n @include style-styles($name);\n }\n }\n &:hover,\n &:focus {\n @include style-styles-hover($name);\n }\n @include when-active() {\n @include style-styles-active($name);\n }\n",
35140
35125
  "line": {
35141
- "start": 372,
35142
- "end": 388
35126
+ "start": 374,
35127
+ "end": 390
35143
35128
  }
35144
35129
  },
35145
35130
  "parameter": [
@@ -36065,10 +36050,10 @@
36065
36050
  "context": {
36066
36051
  "type": "mixin",
36067
36052
  "name": "styles",
36068
- "code": "\n @include utils.file-header('component', 'button');\n\n $prefix: selector.class(\"button\");\n // $printContextual: get(\"contextual-classes\");\n // $classContextual: \"#{ selector.class(\"button-inside\") } ;\n $icon-selector: \"#{ $prefix }--icon\";\n $printDescendant: \"#{ $prefix }--icon\";\n\n #{ $prefix } {\n @include button.default();\n }\n #{ $prefix }--fit {\n min-width: 0;\n }\n #{ $prefix }__icon {\n &:not(:first-child) { \n margin-inline-start: get(\"icon-margin\"); \n }\n &:not(:last-child) { \n margin-inline-end: get(\"icon-margin\"); \n }\n }\n \n @each $size, $values in button.$sizes {\n #{ $prefix }--#{$size} {\n @include button.size($size);\n }\n }\n \n @each $style, $values in button.$styles {\n #{ $prefix }--#{$style} {\n @include button.style($style);\n }\n }\n \n #{ $icon-selector } {\n \n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 0;\n max-width: none;\n border-radius: button.get(\"icon-border-radius\");\n font-size: button.get(\"icon-font-size\");\n width: button.get(\"icon-size\");\n height: button.get(\"icon-size\");\n padding: 0 !important;\n\n #{ $prefix }__icon {\n transform: translateY(get(\"icon-centered-vertical-offset\"));\n margin: 0;\n }\n }\n\n @each $size, $values in button.$sizes {\n $icon-size: map.get($values, \"icon-size\");\n $icon-font-size: map.get($values, \"icon-font-size\");\n @if ($icon-size or $icon-font-size) {\n #{ $prefix }--#{$size}#{ $icon-selector } {\n width: $icon-size;\n height: $icon-size;\n font-size: $icon-font-size;\n }\n }\n }\n",
36053
+ "code": "\n @include utils.file-header('component', 'button');\n\n $prefix: selector.class(\"button\");\n // $printContextual: get(\"contextual-classes\");\n // $classContextual: \"#{ selector.class(\"button-inside\") } ;\n $icon-selector: \"#{ $prefix }--icon\";\n $printDescendant: \"#{ $prefix }--icon\";\n\n #{ $prefix } {\n @include button.default();\n }\n #{ $prefix }--fit {\n min-width: 0;\n }\n #{ $prefix }--left {\n justify-content: flex-start;\n text-align: left;\n }\n \n @each $size, $values in button.$sizes {\n #{ $prefix }--#{$size} {\n @include button.size($size);\n }\n }\n \n @each $style, $values in button.$styles {\n #{ $prefix }--#{$style} {\n @include button.style($style);\n }\n }\n \n #{ $icon-selector } {\n \n min-width: 0;\n max-width: none;\n border-radius: button.get(\"icon-border-radius\");\n font-size: button.get(\"icon-font-size\");\n width: button.get(\"icon-size\");\n height: button.get(\"icon-size\");\n padding: 0 !important;\n\n #{ $prefix }__icon {\n transform: translateY(get(\"icon-centered-vertical-offset\"));\n margin: 0;\n }\n }\n\n @each $size, $values in button.$sizes {\n $icon-size: map.get($values, \"icon-size\");\n $icon-font-size: map.get($values, \"icon-font-size\");\n @if ($icon-size or $icon-font-size) {\n #{ $prefix }--#{$size}#{ $icon-selector } {\n width: $icon-size;\n height: $icon-size;\n font-size: $icon-font-size;\n }\n }\n }\n",
36069
36054
  "line": {
36070
- "start": 53,
36071
- "end": 119
36055
+ "start": 51,
36056
+ "end": 110
36072
36057
  }
36073
36058
  }
36074
36059
  },
@@ -56296,10 +56281,22 @@
56296
56281
  "context": {
56297
56282
  "type": "mixin",
56298
56283
  "name": "default",
56299
- "code": "\n $font-size: get(\"font-size\");\n @if ($with-reset) {\n @include reset();\n }\n appearance: none; // If used with select for example\n display: inline-block;\n text-transform: get(\"text-transform\");\n text-align: center;\n text-shadow: get(\"text-shadow\");\n vertical-align: middle;\n font-family: get(\"font-family\");\n font-weight: get(\"font-weight\");\n @if ($font-size) {\n @include typography.size($font-size, null, true);\n }\n border-radius: get(\"border-radius\");\n // Removed not sure why it was needed, effects buttons with \n // borders (rendering between bg and border)\n // background-clip: padding-box; \n padding: get(\"padding\");\n line-height: get(\"line-height\");\n letter-spacing: get(\"letter-spacing\");\n box-shadow: get(\"box-shadow\");\n margin: get(\"margin\");\n min-width: get(\"min-width\");\n white-space: get(\"white-space\");\n max-width: 100%; // Questionable, not sure if it's needed\n flex-shrink: 0; \n // Should override link visited coloring\n \n @if get(\"transition-enabled\") {\n transition-duration: get(\"transition-duration\");\n transition-property: get(\"transition-properties\");\n }\n &,\n &:visited {\n color: color.get(get(\"color\"));\n border: get(\"border-width\") solid color.get(get(\"border-color\"));\n background-color: color.get(get(\"background-color\"));\n text-decoration: get(\"text-decoration\");\n }\n &:last-child {\n margin-right: 0;\n }\n &:hover,\n &:focus {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n border-color: color.get(get(\"border-color-hover\"));\n text-decoration: get(\"text-decoration\");\n }\n @include when-active() {\n color: color.get(get(\"color-active\"));\n background-color: color.get(get(\"background-color-active\"));\n border-color: color.get(get(\"border-color-active\"));\n }\n",
56284
+ "code": "\n $font-size: get(\"font-size\");\n @if ($with-reset) {\n @include reset();\n }\n appearance: none; // If used with select for example\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: get(\"gap\");\n text-transform: get(\"text-transform\");\n text-shadow: get(\"text-shadow\");\n vertical-align: middle;\n font-family: get(\"font-family\");\n font-weight: get(\"font-weight\");\n @if ($font-size) {\n @include typography.size($font-size, null, true);\n }\n border-radius: get(\"border-radius\");\n // Removed not sure why it was needed, effects buttons with \n // borders (rendering between bg and border)\n // background-clip: padding-box; \n padding: get(\"padding\");\n line-height: get(\"line-height\");\n letter-spacing: get(\"letter-spacing\");\n box-shadow: get(\"box-shadow\");\n margin: get(\"margin\");\n min-width: get(\"min-width\");\n white-space: get(\"white-space\");\n max-width: 100%; // Questionable, not sure if it's needed\n flex-shrink: 0; \n // Should override link visited coloring\n \n @if get(\"transition-enabled\") {\n transition-duration: get(\"transition-duration\");\n transition-property: get(\"transition-properties\");\n }\n &,\n &:visited {\n color: color.get(get(\"color\"));\n border: get(\"border-width\") solid color.get(get(\"border-color\"));\n background-color: color.get(get(\"background-color\"));\n text-decoration: get(\"text-decoration\");\n }\n &:last-child {\n margin-right: 0;\n }\n &:hover,\n &:focus {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n border-color: color.get(get(\"border-color-hover\"));\n text-decoration: get(\"text-decoration\");\n }\n @include when-active() {\n color: color.get(get(\"color-active\"));\n background-color: color.get(get(\"background-color-active\"));\n border-color: color.get(get(\"border-color-active\"));\n }\n",
56285
+ "line": {
56286
+ "start": 196,
56287
+ "end": 255
56288
+ }
56289
+ }
56290
+ },
56291
+ {
56292
+ "description": "Output the default button styles\n",
56293
+ "context": {
56294
+ "type": "mixin",
56295
+ "name": "default",
56296
+ "code": "\n $font-size: get(\"font-size\");\n @if ($with-reset) {\n @include reset();\n }\n appearance: none; // If used with select for example\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: get(\"gap\");\n text-transform: get(\"text-transform\");\n text-shadow: get(\"text-shadow\");\n vertical-align: middle;\n font-family: get(\"font-family\");\n font-weight: get(\"font-weight\");\n @if ($font-size) {\n @include typography.size($font-size, null, true);\n }\n border-radius: get(\"border-radius\");\n // Removed not sure why it was needed, effects buttons with \n // borders (rendering between bg and border)\n // background-clip: padding-box; \n padding: get(\"padding\");\n line-height: get(\"line-height\");\n letter-spacing: get(\"letter-spacing\");\n box-shadow: get(\"box-shadow\");\n margin: get(\"margin\");\n min-width: get(\"min-width\");\n white-space: get(\"white-space\");\n max-width: 100%; // Questionable, not sure if it's needed\n flex-shrink: 0; \n // Should override link visited coloring\n \n @if get(\"transition-enabled\") {\n transition-duration: get(\"transition-duration\");\n transition-property: get(\"transition-properties\");\n }\n &,\n &:visited {\n color: color.get(get(\"color\"));\n border: get(\"border-width\") solid color.get(get(\"border-color\"));\n background-color: color.get(get(\"background-color\"));\n text-decoration: get(\"text-decoration\");\n }\n &:last-child {\n margin-right: 0;\n }\n &:hover,\n &:focus {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n border-color: color.get(get(\"border-color-hover\"));\n text-decoration: get(\"text-decoration\");\n }\n @include when-active() {\n color: color.get(get(\"color-active\"));\n background-color: color.get(get(\"background-color-active\"));\n border-color: color.get(get(\"border-color-active\"));\n }\n",
56300
56297
  "line": {
56301
56298
  "start": 196,
56302
- "end": 253
56299
+ "end": 255
56303
56300
  }
56304
56301
  }
56305
56302
  },
@@ -56308,10 +56305,10 @@
56308
56305
  "context": {
56309
56306
  "type": "mixin",
56310
56307
  "name": "default",
56311
- "code": "\n $font-size: get(\"font-size\");\n @if ($with-reset) {\n @include reset();\n }\n appearance: none; // If used with select for example\n display: inline-block;\n text-transform: get(\"text-transform\");\n text-align: center;\n text-shadow: get(\"text-shadow\");\n vertical-align: middle;\n font-family: get(\"font-family\");\n font-weight: get(\"font-weight\");\n @if ($font-size) {\n @include typography.size($font-size, null, true);\n }\n border-radius: get(\"border-radius\");\n // Removed not sure why it was needed, effects buttons with \n // borders (rendering between bg and border)\n // background-clip: padding-box; \n padding: get(\"padding\");\n line-height: get(\"line-height\");\n letter-spacing: get(\"letter-spacing\");\n box-shadow: get(\"box-shadow\");\n margin: get(\"margin\");\n min-width: get(\"min-width\");\n white-space: get(\"white-space\");\n max-width: 100%; // Questionable, not sure if it's needed\n flex-shrink: 0; \n // Should override link visited coloring\n \n @if get(\"transition-enabled\") {\n transition-duration: get(\"transition-duration\");\n transition-property: get(\"transition-properties\");\n }\n &,\n &:visited {\n color: color.get(get(\"color\"));\n border: get(\"border-width\") solid color.get(get(\"border-color\"));\n background-color: color.get(get(\"background-color\"));\n text-decoration: get(\"text-decoration\");\n }\n &:last-child {\n margin-right: 0;\n }\n &:hover,\n &:focus {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n border-color: color.get(get(\"border-color-hover\"));\n text-decoration: get(\"text-decoration\");\n }\n @include when-active() {\n color: color.get(get(\"color-active\"));\n background-color: color.get(get(\"background-color-active\"));\n border-color: color.get(get(\"border-color-active\"));\n }\n",
56308
+ "code": "\n $font-size: get(\"font-size\");\n @if ($with-reset) {\n @include reset();\n }\n appearance: none; // If used with select for example\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: get(\"gap\");\n text-transform: get(\"text-transform\");\n text-shadow: get(\"text-shadow\");\n vertical-align: middle;\n font-family: get(\"font-family\");\n font-weight: get(\"font-weight\");\n @if ($font-size) {\n @include typography.size($font-size, null, true);\n }\n border-radius: get(\"border-radius\");\n // Removed not sure why it was needed, effects buttons with \n // borders (rendering between bg and border)\n // background-clip: padding-box; \n padding: get(\"padding\");\n line-height: get(\"line-height\");\n letter-spacing: get(\"letter-spacing\");\n box-shadow: get(\"box-shadow\");\n margin: get(\"margin\");\n min-width: get(\"min-width\");\n white-space: get(\"white-space\");\n max-width: 100%; // Questionable, not sure if it's needed\n flex-shrink: 0; \n // Should override link visited coloring\n \n @if get(\"transition-enabled\") {\n transition-duration: get(\"transition-duration\");\n transition-property: get(\"transition-properties\");\n }\n &,\n &:visited {\n color: color.get(get(\"color\"));\n border: get(\"border-width\") solid color.get(get(\"border-color\"));\n background-color: color.get(get(\"background-color\"));\n text-decoration: get(\"text-decoration\");\n }\n &:last-child {\n margin-right: 0;\n }\n &:hover,\n &:focus {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n border-color: color.get(get(\"border-color-hover\"));\n text-decoration: get(\"text-decoration\");\n }\n @include when-active() {\n color: color.get(get(\"color-active\"));\n background-color: color.get(get(\"background-color-active\"));\n border-color: color.get(get(\"border-color-active\"));\n }\n",
56312
56309
  "line": {
56313
56310
  "start": 196,
56314
- "end": 253
56311
+ "end": 255
56315
56312
  }
56316
56313
  }
56317
56314
  },
@@ -56320,10 +56317,10 @@
56320
56317
  "context": {
56321
56318
  "type": "mixin",
56322
56319
  "name": "default",
56323
- "code": "\n $font-size: get(\"font-size\");\n @if ($with-reset) {\n @include reset();\n }\n appearance: none; // If used with select for example\n display: inline-block;\n text-transform: get(\"text-transform\");\n text-align: center;\n text-shadow: get(\"text-shadow\");\n vertical-align: middle;\n font-family: get(\"font-family\");\n font-weight: get(\"font-weight\");\n @if ($font-size) {\n @include typography.size($font-size, null, true);\n }\n border-radius: get(\"border-radius\");\n // Removed not sure why it was needed, effects buttons with \n // borders (rendering between bg and border)\n // background-clip: padding-box; \n padding: get(\"padding\");\n line-height: get(\"line-height\");\n letter-spacing: get(\"letter-spacing\");\n box-shadow: get(\"box-shadow\");\n margin: get(\"margin\");\n min-width: get(\"min-width\");\n white-space: get(\"white-space\");\n max-width: 100%; // Questionable, not sure if it's needed\n flex-shrink: 0; \n // Should override link visited coloring\n \n @if get(\"transition-enabled\") {\n transition-duration: get(\"transition-duration\");\n transition-property: get(\"transition-properties\");\n }\n &,\n &:visited {\n color: color.get(get(\"color\"));\n border: get(\"border-width\") solid color.get(get(\"border-color\"));\n background-color: color.get(get(\"background-color\"));\n text-decoration: get(\"text-decoration\");\n }\n &:last-child {\n margin-right: 0;\n }\n &:hover,\n &:focus {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n border-color: color.get(get(\"border-color-hover\"));\n text-decoration: get(\"text-decoration\");\n }\n @include when-active() {\n color: color.get(get(\"color-active\"));\n background-color: color.get(get(\"background-color-active\"));\n border-color: color.get(get(\"border-color-active\"));\n }\n",
56320
+ "code": "\n $font-size: get(\"font-size\");\n @if ($with-reset) {\n @include reset();\n }\n appearance: none; // If used with select for example\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: get(\"gap\");\n text-transform: get(\"text-transform\");\n text-shadow: get(\"text-shadow\");\n vertical-align: middle;\n font-family: get(\"font-family\");\n font-weight: get(\"font-weight\");\n @if ($font-size) {\n @include typography.size($font-size, null, true);\n }\n border-radius: get(\"border-radius\");\n // Removed not sure why it was needed, effects buttons with \n // borders (rendering between bg and border)\n // background-clip: padding-box; \n padding: get(\"padding\");\n line-height: get(\"line-height\");\n letter-spacing: get(\"letter-spacing\");\n box-shadow: get(\"box-shadow\");\n margin: get(\"margin\");\n min-width: get(\"min-width\");\n white-space: get(\"white-space\");\n max-width: 100%; // Questionable, not sure if it's needed\n flex-shrink: 0; \n // Should override link visited coloring\n \n @if get(\"transition-enabled\") {\n transition-duration: get(\"transition-duration\");\n transition-property: get(\"transition-properties\");\n }\n &,\n &:visited {\n color: color.get(get(\"color\"));\n border: get(\"border-width\") solid color.get(get(\"border-color\"));\n background-color: color.get(get(\"background-color\"));\n text-decoration: get(\"text-decoration\");\n }\n &:last-child {\n margin-right: 0;\n }\n &:hover,\n &:focus {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n border-color: color.get(get(\"border-color-hover\"));\n text-decoration: get(\"text-decoration\");\n }\n @include when-active() {\n color: color.get(get(\"color-active\"));\n background-color: color.get(get(\"background-color-active\"));\n border-color: color.get(get(\"border-color-active\"));\n }\n",
56324
56321
  "line": {
56325
56322
  "start": 196,
56326
- "end": 253
56323
+ "end": 255
56327
56324
  }
56328
56325
  }
56329
56326
  },
@@ -56332,10 +56329,10 @@
56332
56329
  "context": {
56333
56330
  "type": "mixin",
56334
56331
  "name": "default",
56335
- "code": "\n $font-size: get(\"font-size\");\n @if ($with-reset) {\n @include reset();\n }\n appearance: none; // If used with select for example\n display: inline-block;\n text-transform: get(\"text-transform\");\n text-align: center;\n text-shadow: get(\"text-shadow\");\n vertical-align: middle;\n font-family: get(\"font-family\");\n font-weight: get(\"font-weight\");\n @if ($font-size) {\n @include typography.size($font-size, null, true);\n }\n border-radius: get(\"border-radius\");\n // Removed not sure why it was needed, effects buttons with \n // borders (rendering between bg and border)\n // background-clip: padding-box; \n padding: get(\"padding\");\n line-height: get(\"line-height\");\n letter-spacing: get(\"letter-spacing\");\n box-shadow: get(\"box-shadow\");\n margin: get(\"margin\");\n min-width: get(\"min-width\");\n white-space: get(\"white-space\");\n max-width: 100%; // Questionable, not sure if it's needed\n flex-shrink: 0; \n // Should override link visited coloring\n \n @if get(\"transition-enabled\") {\n transition-duration: get(\"transition-duration\");\n transition-property: get(\"transition-properties\");\n }\n &,\n &:visited {\n color: color.get(get(\"color\"));\n border: get(\"border-width\") solid color.get(get(\"border-color\"));\n background-color: color.get(get(\"background-color\"));\n text-decoration: get(\"text-decoration\");\n }\n &:last-child {\n margin-right: 0;\n }\n &:hover,\n &:focus {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n border-color: color.get(get(\"border-color-hover\"));\n text-decoration: get(\"text-decoration\");\n }\n @include when-active() {\n color: color.get(get(\"color-active\"));\n background-color: color.get(get(\"background-color-active\"));\n border-color: color.get(get(\"border-color-active\"));\n }\n",
56332
+ "code": "\n $font-size: get(\"font-size\");\n @if ($with-reset) {\n @include reset();\n }\n appearance: none; // If used with select for example\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: get(\"gap\");\n text-transform: get(\"text-transform\");\n text-shadow: get(\"text-shadow\");\n vertical-align: middle;\n font-family: get(\"font-family\");\n font-weight: get(\"font-weight\");\n @if ($font-size) {\n @include typography.size($font-size, null, true);\n }\n border-radius: get(\"border-radius\");\n // Removed not sure why it was needed, effects buttons with \n // borders (rendering between bg and border)\n // background-clip: padding-box; \n padding: get(\"padding\");\n line-height: get(\"line-height\");\n letter-spacing: get(\"letter-spacing\");\n box-shadow: get(\"box-shadow\");\n margin: get(\"margin\");\n min-width: get(\"min-width\");\n white-space: get(\"white-space\");\n max-width: 100%; // Questionable, not sure if it's needed\n flex-shrink: 0; \n // Should override link visited coloring\n \n @if get(\"transition-enabled\") {\n transition-duration: get(\"transition-duration\");\n transition-property: get(\"transition-properties\");\n }\n &,\n &:visited {\n color: color.get(get(\"color\"));\n border: get(\"border-width\") solid color.get(get(\"border-color\"));\n background-color: color.get(get(\"background-color\"));\n text-decoration: get(\"text-decoration\");\n }\n &:last-child {\n margin-right: 0;\n }\n &:hover,\n &:focus {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n border-color: color.get(get(\"border-color-hover\"));\n text-decoration: get(\"text-decoration\");\n }\n @include when-active() {\n color: color.get(get(\"color-active\"));\n background-color: color.get(get(\"background-color-active\"));\n border-color: color.get(get(\"border-color-active\"));\n }\n",
56336
56333
  "line": {
56337
56334
  "start": 196,
56338
- "end": 253
56335
+ "end": 255
56339
56336
  }
56340
56337
  }
56341
56338
  },
@@ -56344,10 +56341,10 @@
56344
56341
  "context": {
56345
56342
  "type": "mixin",
56346
56343
  "name": "default",
56347
- "code": "\n $font-size: get(\"font-size\");\n @if ($with-reset) {\n @include reset();\n }\n appearance: none; // If used with select for example\n display: inline-block;\n text-transform: get(\"text-transform\");\n text-align: center;\n text-shadow: get(\"text-shadow\");\n vertical-align: middle;\n font-family: get(\"font-family\");\n font-weight: get(\"font-weight\");\n @if ($font-size) {\n @include typography.size($font-size, null, true);\n }\n border-radius: get(\"border-radius\");\n // Removed not sure why it was needed, effects buttons with \n // borders (rendering between bg and border)\n // background-clip: padding-box; \n padding: get(\"padding\");\n line-height: get(\"line-height\");\n letter-spacing: get(\"letter-spacing\");\n box-shadow: get(\"box-shadow\");\n margin: get(\"margin\");\n min-width: get(\"min-width\");\n white-space: get(\"white-space\");\n max-width: 100%; // Questionable, not sure if it's needed\n flex-shrink: 0; \n // Should override link visited coloring\n \n @if get(\"transition-enabled\") {\n transition-duration: get(\"transition-duration\");\n transition-property: get(\"transition-properties\");\n }\n &,\n &:visited {\n color: color.get(get(\"color\"));\n border: get(\"border-width\") solid color.get(get(\"border-color\"));\n background-color: color.get(get(\"background-color\"));\n text-decoration: get(\"text-decoration\");\n }\n &:last-child {\n margin-right: 0;\n }\n &:hover,\n &:focus {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n border-color: color.get(get(\"border-color-hover\"));\n text-decoration: get(\"text-decoration\");\n }\n @include when-active() {\n color: color.get(get(\"color-active\"));\n background-color: color.get(get(\"background-color-active\"));\n border-color: color.get(get(\"border-color-active\"));\n }\n",
56344
+ "code": "\n $font-size: get(\"font-size\");\n @if ($with-reset) {\n @include reset();\n }\n appearance: none; // If used with select for example\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: get(\"gap\");\n text-transform: get(\"text-transform\");\n text-shadow: get(\"text-shadow\");\n vertical-align: middle;\n font-family: get(\"font-family\");\n font-weight: get(\"font-weight\");\n @if ($font-size) {\n @include typography.size($font-size, null, true);\n }\n border-radius: get(\"border-radius\");\n // Removed not sure why it was needed, effects buttons with \n // borders (rendering between bg and border)\n // background-clip: padding-box; \n padding: get(\"padding\");\n line-height: get(\"line-height\");\n letter-spacing: get(\"letter-spacing\");\n box-shadow: get(\"box-shadow\");\n margin: get(\"margin\");\n min-width: get(\"min-width\");\n white-space: get(\"white-space\");\n max-width: 100%; // Questionable, not sure if it's needed\n flex-shrink: 0; \n // Should override link visited coloring\n \n @if get(\"transition-enabled\") {\n transition-duration: get(\"transition-duration\");\n transition-property: get(\"transition-properties\");\n }\n &,\n &:visited {\n color: color.get(get(\"color\"));\n border: get(\"border-width\") solid color.get(get(\"border-color\"));\n background-color: color.get(get(\"background-color\"));\n text-decoration: get(\"text-decoration\");\n }\n &:last-child {\n margin-right: 0;\n }\n &:hover,\n &:focus {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n border-color: color.get(get(\"border-color-hover\"));\n text-decoration: get(\"text-decoration\");\n }\n @include when-active() {\n color: color.get(get(\"color-active\"));\n background-color: color.get(get(\"background-color-active\"));\n border-color: color.get(get(\"border-color-active\"));\n }\n",
56348
56345
  "line": {
56349
56346
  "start": 196,
56350
- "end": 253
56347
+ "end": 255
56351
56348
  }
56352
56349
  }
56353
56350
  },
@@ -56356,10 +56353,10 @@
56356
56353
  "context": {
56357
56354
  "type": "mixin",
56358
56355
  "name": "default",
56359
- "code": "\n $font-size: get(\"font-size\");\n @if ($with-reset) {\n @include reset();\n }\n appearance: none; // If used with select for example\n display: inline-block;\n text-transform: get(\"text-transform\");\n text-align: center;\n text-shadow: get(\"text-shadow\");\n vertical-align: middle;\n font-family: get(\"font-family\");\n font-weight: get(\"font-weight\");\n @if ($font-size) {\n @include typography.size($font-size, null, true);\n }\n border-radius: get(\"border-radius\");\n // Removed not sure why it was needed, effects buttons with \n // borders (rendering between bg and border)\n // background-clip: padding-box; \n padding: get(\"padding\");\n line-height: get(\"line-height\");\n letter-spacing: get(\"letter-spacing\");\n box-shadow: get(\"box-shadow\");\n margin: get(\"margin\");\n min-width: get(\"min-width\");\n white-space: get(\"white-space\");\n max-width: 100%; // Questionable, not sure if it's needed\n flex-shrink: 0; \n // Should override link visited coloring\n \n @if get(\"transition-enabled\") {\n transition-duration: get(\"transition-duration\");\n transition-property: get(\"transition-properties\");\n }\n &,\n &:visited {\n color: color.get(get(\"color\"));\n border: get(\"border-width\") solid color.get(get(\"border-color\"));\n background-color: color.get(get(\"background-color\"));\n text-decoration: get(\"text-decoration\");\n }\n &:last-child {\n margin-right: 0;\n }\n &:hover,\n &:focus {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n border-color: color.get(get(\"border-color-hover\"));\n text-decoration: get(\"text-decoration\");\n }\n @include when-active() {\n color: color.get(get(\"color-active\"));\n background-color: color.get(get(\"background-color-active\"));\n border-color: color.get(get(\"border-color-active\"));\n }\n",
56356
+ "code": "\n $font-size: get(\"font-size\");\n @if ($with-reset) {\n @include reset();\n }\n appearance: none; // If used with select for example\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: get(\"gap\");\n text-transform: get(\"text-transform\");\n text-shadow: get(\"text-shadow\");\n vertical-align: middle;\n font-family: get(\"font-family\");\n font-weight: get(\"font-weight\");\n @if ($font-size) {\n @include typography.size($font-size, null, true);\n }\n border-radius: get(\"border-radius\");\n // Removed not sure why it was needed, effects buttons with \n // borders (rendering between bg and border)\n // background-clip: padding-box; \n padding: get(\"padding\");\n line-height: get(\"line-height\");\n letter-spacing: get(\"letter-spacing\");\n box-shadow: get(\"box-shadow\");\n margin: get(\"margin\");\n min-width: get(\"min-width\");\n white-space: get(\"white-space\");\n max-width: 100%; // Questionable, not sure if it's needed\n flex-shrink: 0; \n // Should override link visited coloring\n \n @if get(\"transition-enabled\") {\n transition-duration: get(\"transition-duration\");\n transition-property: get(\"transition-properties\");\n }\n &,\n &:visited {\n color: color.get(get(\"color\"));\n border: get(\"border-width\") solid color.get(get(\"border-color\"));\n background-color: color.get(get(\"background-color\"));\n text-decoration: get(\"text-decoration\");\n }\n &:last-child {\n margin-right: 0;\n }\n &:hover,\n &:focus {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n border-color: color.get(get(\"border-color-hover\"));\n text-decoration: get(\"text-decoration\");\n }\n @include when-active() {\n color: color.get(get(\"color-active\"));\n background-color: color.get(get(\"background-color-active\"));\n border-color: color.get(get(\"border-color-active\"));\n }\n",
56360
56357
  "line": {
56361
56358
  "start": 196,
56362
- "end": 253
56359
+ "end": 255
56363
56360
  }
56364
56361
  }
56365
56362
  },
@@ -56368,10 +56365,10 @@
56368
56365
  "context": {
56369
56366
  "type": "mixin",
56370
56367
  "name": "default",
56371
- "code": "\n $font-size: get(\"font-size\");\n @if ($with-reset) {\n @include reset();\n }\n appearance: none; // If used with select for example\n display: inline-block;\n text-transform: get(\"text-transform\");\n text-align: center;\n text-shadow: get(\"text-shadow\");\n vertical-align: middle;\n font-family: get(\"font-family\");\n font-weight: get(\"font-weight\");\n @if ($font-size) {\n @include typography.size($font-size, null, true);\n }\n border-radius: get(\"border-radius\");\n // Removed not sure why it was needed, effects buttons with \n // borders (rendering between bg and border)\n // background-clip: padding-box; \n padding: get(\"padding\");\n line-height: get(\"line-height\");\n letter-spacing: get(\"letter-spacing\");\n box-shadow: get(\"box-shadow\");\n margin: get(\"margin\");\n min-width: get(\"min-width\");\n white-space: get(\"white-space\");\n max-width: 100%; // Questionable, not sure if it's needed\n flex-shrink: 0; \n // Should override link visited coloring\n \n @if get(\"transition-enabled\") {\n transition-duration: get(\"transition-duration\");\n transition-property: get(\"transition-properties\");\n }\n &,\n &:visited {\n color: color.get(get(\"color\"));\n border: get(\"border-width\") solid color.get(get(\"border-color\"));\n background-color: color.get(get(\"background-color\"));\n text-decoration: get(\"text-decoration\");\n }\n &:last-child {\n margin-right: 0;\n }\n &:hover,\n &:focus {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n border-color: color.get(get(\"border-color-hover\"));\n text-decoration: get(\"text-decoration\");\n }\n @include when-active() {\n color: color.get(get(\"color-active\"));\n background-color: color.get(get(\"background-color-active\"));\n border-color: color.get(get(\"border-color-active\"));\n }\n",
56368
+ "code": "\n $font-size: get(\"font-size\");\n @if ($with-reset) {\n @include reset();\n }\n appearance: none; // If used with select for example\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: get(\"gap\");\n text-transform: get(\"text-transform\");\n text-shadow: get(\"text-shadow\");\n vertical-align: middle;\n font-family: get(\"font-family\");\n font-weight: get(\"font-weight\");\n @if ($font-size) {\n @include typography.size($font-size, null, true);\n }\n border-radius: get(\"border-radius\");\n // Removed not sure why it was needed, effects buttons with \n // borders (rendering between bg and border)\n // background-clip: padding-box; \n padding: get(\"padding\");\n line-height: get(\"line-height\");\n letter-spacing: get(\"letter-spacing\");\n box-shadow: get(\"box-shadow\");\n margin: get(\"margin\");\n min-width: get(\"min-width\");\n white-space: get(\"white-space\");\n max-width: 100%; // Questionable, not sure if it's needed\n flex-shrink: 0; \n // Should override link visited coloring\n \n @if get(\"transition-enabled\") {\n transition-duration: get(\"transition-duration\");\n transition-property: get(\"transition-properties\");\n }\n &,\n &:visited {\n color: color.get(get(\"color\"));\n border: get(\"border-width\") solid color.get(get(\"border-color\"));\n background-color: color.get(get(\"background-color\"));\n text-decoration: get(\"text-decoration\");\n }\n &:last-child {\n margin-right: 0;\n }\n &:hover,\n &:focus {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n border-color: color.get(get(\"border-color-hover\"));\n text-decoration: get(\"text-decoration\");\n }\n @include when-active() {\n color: color.get(get(\"color-active\"));\n background-color: color.get(get(\"background-color-active\"));\n border-color: color.get(get(\"border-color-active\"));\n }\n",
56372
56369
  "line": {
56373
56370
  "start": 196,
56374
- "end": 253
56371
+ "end": 255
56375
56372
  }
56376
56373
  }
56377
56374
  },
@@ -56380,10 +56377,10 @@
56380
56377
  "context": {
56381
56378
  "type": "mixin",
56382
56379
  "name": "default",
56383
- "code": "\n $font-size: get(\"font-size\");\n @if ($with-reset) {\n @include reset();\n }\n appearance: none; // If used with select for example\n display: inline-block;\n text-transform: get(\"text-transform\");\n text-align: center;\n text-shadow: get(\"text-shadow\");\n vertical-align: middle;\n font-family: get(\"font-family\");\n font-weight: get(\"font-weight\");\n @if ($font-size) {\n @include typography.size($font-size, null, true);\n }\n border-radius: get(\"border-radius\");\n // Removed not sure why it was needed, effects buttons with \n // borders (rendering between bg and border)\n // background-clip: padding-box; \n padding: get(\"padding\");\n line-height: get(\"line-height\");\n letter-spacing: get(\"letter-spacing\");\n box-shadow: get(\"box-shadow\");\n margin: get(\"margin\");\n min-width: get(\"min-width\");\n white-space: get(\"white-space\");\n max-width: 100%; // Questionable, not sure if it's needed\n flex-shrink: 0; \n // Should override link visited coloring\n \n @if get(\"transition-enabled\") {\n transition-duration: get(\"transition-duration\");\n transition-property: get(\"transition-properties\");\n }\n &,\n &:visited {\n color: color.get(get(\"color\"));\n border: get(\"border-width\") solid color.get(get(\"border-color\"));\n background-color: color.get(get(\"background-color\"));\n text-decoration: get(\"text-decoration\");\n }\n &:last-child {\n margin-right: 0;\n }\n &:hover,\n &:focus {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n border-color: color.get(get(\"border-color-hover\"));\n text-decoration: get(\"text-decoration\");\n }\n @include when-active() {\n color: color.get(get(\"color-active\"));\n background-color: color.get(get(\"background-color-active\"));\n border-color: color.get(get(\"border-color-active\"));\n }\n",
56380
+ "code": "\n $font-size: get(\"font-size\");\n @if ($with-reset) {\n @include reset();\n }\n appearance: none; // If used with select for example\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: get(\"gap\");\n text-transform: get(\"text-transform\");\n text-shadow: get(\"text-shadow\");\n vertical-align: middle;\n font-family: get(\"font-family\");\n font-weight: get(\"font-weight\");\n @if ($font-size) {\n @include typography.size($font-size, null, true);\n }\n border-radius: get(\"border-radius\");\n // Removed not sure why it was needed, effects buttons with \n // borders (rendering between bg and border)\n // background-clip: padding-box; \n padding: get(\"padding\");\n line-height: get(\"line-height\");\n letter-spacing: get(\"letter-spacing\");\n box-shadow: get(\"box-shadow\");\n margin: get(\"margin\");\n min-width: get(\"min-width\");\n white-space: get(\"white-space\");\n max-width: 100%; // Questionable, not sure if it's needed\n flex-shrink: 0; \n // Should override link visited coloring\n \n @if get(\"transition-enabled\") {\n transition-duration: get(\"transition-duration\");\n transition-property: get(\"transition-properties\");\n }\n &,\n &:visited {\n color: color.get(get(\"color\"));\n border: get(\"border-width\") solid color.get(get(\"border-color\"));\n background-color: color.get(get(\"background-color\"));\n text-decoration: get(\"text-decoration\");\n }\n &:last-child {\n margin-right: 0;\n }\n &:hover,\n &:focus {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n border-color: color.get(get(\"border-color-hover\"));\n text-decoration: get(\"text-decoration\");\n }\n @include when-active() {\n color: color.get(get(\"color-active\"));\n background-color: color.get(get(\"background-color-active\"));\n border-color: color.get(get(\"border-color-active\"));\n }\n",
56384
56381
  "line": {
56385
56382
  "start": 196,
56386
- "end": 253
56383
+ "end": 255
56387
56384
  }
56388
56385
  }
56389
56386
  },
@@ -56392,10 +56389,10 @@
56392
56389
  "context": {
56393
56390
  "type": "mixin",
56394
56391
  "name": "default",
56395
- "code": "\n $font-size: get(\"font-size\");\n @if ($with-reset) {\n @include reset();\n }\n appearance: none; // If used with select for example\n display: inline-block;\n text-transform: get(\"text-transform\");\n text-align: center;\n text-shadow: get(\"text-shadow\");\n vertical-align: middle;\n font-family: get(\"font-family\");\n font-weight: get(\"font-weight\");\n @if ($font-size) {\n @include typography.size($font-size, null, true);\n }\n border-radius: get(\"border-radius\");\n // Removed not sure why it was needed, effects buttons with \n // borders (rendering between bg and border)\n // background-clip: padding-box; \n padding: get(\"padding\");\n line-height: get(\"line-height\");\n letter-spacing: get(\"letter-spacing\");\n box-shadow: get(\"box-shadow\");\n margin: get(\"margin\");\n min-width: get(\"min-width\");\n white-space: get(\"white-space\");\n max-width: 100%; // Questionable, not sure if it's needed\n flex-shrink: 0; \n // Should override link visited coloring\n \n @if get(\"transition-enabled\") {\n transition-duration: get(\"transition-duration\");\n transition-property: get(\"transition-properties\");\n }\n &,\n &:visited {\n color: color.get(get(\"color\"));\n border: get(\"border-width\") solid color.get(get(\"border-color\"));\n background-color: color.get(get(\"background-color\"));\n text-decoration: get(\"text-decoration\");\n }\n &:last-child {\n margin-right: 0;\n }\n &:hover,\n &:focus {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n border-color: color.get(get(\"border-color-hover\"));\n text-decoration: get(\"text-decoration\");\n }\n @include when-active() {\n color: color.get(get(\"color-active\"));\n background-color: color.get(get(\"background-color-active\"));\n border-color: color.get(get(\"border-color-active\"));\n }\n",
56392
+ "code": "\n $font-size: get(\"font-size\");\n @if ($with-reset) {\n @include reset();\n }\n appearance: none; // If used with select for example\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: get(\"gap\");\n text-transform: get(\"text-transform\");\n text-shadow: get(\"text-shadow\");\n vertical-align: middle;\n font-family: get(\"font-family\");\n font-weight: get(\"font-weight\");\n @if ($font-size) {\n @include typography.size($font-size, null, true);\n }\n border-radius: get(\"border-radius\");\n // Removed not sure why it was needed, effects buttons with \n // borders (rendering between bg and border)\n // background-clip: padding-box; \n padding: get(\"padding\");\n line-height: get(\"line-height\");\n letter-spacing: get(\"letter-spacing\");\n box-shadow: get(\"box-shadow\");\n margin: get(\"margin\");\n min-width: get(\"min-width\");\n white-space: get(\"white-space\");\n max-width: 100%; // Questionable, not sure if it's needed\n flex-shrink: 0; \n // Should override link visited coloring\n \n @if get(\"transition-enabled\") {\n transition-duration: get(\"transition-duration\");\n transition-property: get(\"transition-properties\");\n }\n &,\n &:visited {\n color: color.get(get(\"color\"));\n border: get(\"border-width\") solid color.get(get(\"border-color\"));\n background-color: color.get(get(\"background-color\"));\n text-decoration: get(\"text-decoration\");\n }\n &:last-child {\n margin-right: 0;\n }\n &:hover,\n &:focus {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n border-color: color.get(get(\"border-color-hover\"));\n text-decoration: get(\"text-decoration\");\n }\n @include when-active() {\n color: color.get(get(\"color-active\"));\n background-color: color.get(get(\"background-color-active\"));\n border-color: color.get(get(\"border-color-active\"));\n }\n",
56396
56393
  "line": {
56397
56394
  "start": 196,
56398
- "end": 253
56395
+ "end": 255
56399
56396
  }
56400
56397
  }
56401
56398
  },
@@ -56404,10 +56401,10 @@
56404
56401
  "context": {
56405
56402
  "type": "mixin",
56406
56403
  "name": "default",
56407
- "code": "\n $font-size: get(\"font-size\");\n @if ($with-reset) {\n @include reset();\n }\n appearance: none; // If used with select for example\n display: inline-block;\n text-transform: get(\"text-transform\");\n text-align: center;\n text-shadow: get(\"text-shadow\");\n vertical-align: middle;\n font-family: get(\"font-family\");\n font-weight: get(\"font-weight\");\n @if ($font-size) {\n @include typography.size($font-size, null, true);\n }\n border-radius: get(\"border-radius\");\n // Removed not sure why it was needed, effects buttons with \n // borders (rendering between bg and border)\n // background-clip: padding-box; \n padding: get(\"padding\");\n line-height: get(\"line-height\");\n letter-spacing: get(\"letter-spacing\");\n box-shadow: get(\"box-shadow\");\n margin: get(\"margin\");\n min-width: get(\"min-width\");\n white-space: get(\"white-space\");\n max-width: 100%; // Questionable, not sure if it's needed\n flex-shrink: 0; \n // Should override link visited coloring\n \n @if get(\"transition-enabled\") {\n transition-duration: get(\"transition-duration\");\n transition-property: get(\"transition-properties\");\n }\n &,\n &:visited {\n color: color.get(get(\"color\"));\n border: get(\"border-width\") solid color.get(get(\"border-color\"));\n background-color: color.get(get(\"background-color\"));\n text-decoration: get(\"text-decoration\");\n }\n &:last-child {\n margin-right: 0;\n }\n &:hover,\n &:focus {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n border-color: color.get(get(\"border-color-hover\"));\n text-decoration: get(\"text-decoration\");\n }\n @include when-active() {\n color: color.get(get(\"color-active\"));\n background-color: color.get(get(\"background-color-active\"));\n border-color: color.get(get(\"border-color-active\"));\n }\n",
56404
+ "code": "\n $font-size: get(\"font-size\");\n @if ($with-reset) {\n @include reset();\n }\n appearance: none; // If used with select for example\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: get(\"gap\");\n text-transform: get(\"text-transform\");\n text-shadow: get(\"text-shadow\");\n vertical-align: middle;\n font-family: get(\"font-family\");\n font-weight: get(\"font-weight\");\n @if ($font-size) {\n @include typography.size($font-size, null, true);\n }\n border-radius: get(\"border-radius\");\n // Removed not sure why it was needed, effects buttons with \n // borders (rendering between bg and border)\n // background-clip: padding-box; \n padding: get(\"padding\");\n line-height: get(\"line-height\");\n letter-spacing: get(\"letter-spacing\");\n box-shadow: get(\"box-shadow\");\n margin: get(\"margin\");\n min-width: get(\"min-width\");\n white-space: get(\"white-space\");\n max-width: 100%; // Questionable, not sure if it's needed\n flex-shrink: 0; \n // Should override link visited coloring\n \n @if get(\"transition-enabled\") {\n transition-duration: get(\"transition-duration\");\n transition-property: get(\"transition-properties\");\n }\n &,\n &:visited {\n color: color.get(get(\"color\"));\n border: get(\"border-width\") solid color.get(get(\"border-color\"));\n background-color: color.get(get(\"background-color\"));\n text-decoration: get(\"text-decoration\");\n }\n &:last-child {\n margin-right: 0;\n }\n &:hover,\n &:focus {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n border-color: color.get(get(\"border-color-hover\"));\n text-decoration: get(\"text-decoration\");\n }\n @include when-active() {\n color: color.get(get(\"color-active\"));\n background-color: color.get(get(\"background-color-active\"));\n border-color: color.get(get(\"border-color-active\"));\n }\n",
56408
56405
  "line": {
56409
56406
  "start": 196,
56410
- "end": 253
56407
+ "end": 255
56411
56408
  }
56412
56409
  }
56413
56410
  },
@@ -56416,10 +56413,10 @@
56416
56413
  "context": {
56417
56414
  "type": "mixin",
56418
56415
  "name": "default",
56419
- "code": "\n $font-size: get(\"font-size\");\n @if ($with-reset) {\n @include reset();\n }\n appearance: none; // If used with select for example\n display: inline-block;\n text-transform: get(\"text-transform\");\n text-align: center;\n text-shadow: get(\"text-shadow\");\n vertical-align: middle;\n font-family: get(\"font-family\");\n font-weight: get(\"font-weight\");\n @if ($font-size) {\n @include typography.size($font-size, null, true);\n }\n border-radius: get(\"border-radius\");\n // Removed not sure why it was needed, effects buttons with \n // borders (rendering between bg and border)\n // background-clip: padding-box; \n padding: get(\"padding\");\n line-height: get(\"line-height\");\n letter-spacing: get(\"letter-spacing\");\n box-shadow: get(\"box-shadow\");\n margin: get(\"margin\");\n min-width: get(\"min-width\");\n white-space: get(\"white-space\");\n max-width: 100%; // Questionable, not sure if it's needed\n flex-shrink: 0; \n // Should override link visited coloring\n \n @if get(\"transition-enabled\") {\n transition-duration: get(\"transition-duration\");\n transition-property: get(\"transition-properties\");\n }\n &,\n &:visited {\n color: color.get(get(\"color\"));\n border: get(\"border-width\") solid color.get(get(\"border-color\"));\n background-color: color.get(get(\"background-color\"));\n text-decoration: get(\"text-decoration\");\n }\n &:last-child {\n margin-right: 0;\n }\n &:hover,\n &:focus {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n border-color: color.get(get(\"border-color-hover\"));\n text-decoration: get(\"text-decoration\");\n }\n @include when-active() {\n color: color.get(get(\"color-active\"));\n background-color: color.get(get(\"background-color-active\"));\n border-color: color.get(get(\"border-color-active\"));\n }\n",
56416
+ "code": "\n $font-size: get(\"font-size\");\n @if ($with-reset) {\n @include reset();\n }\n appearance: none; // If used with select for example\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: get(\"gap\");\n text-transform: get(\"text-transform\");\n text-shadow: get(\"text-shadow\");\n vertical-align: middle;\n font-family: get(\"font-family\");\n font-weight: get(\"font-weight\");\n @if ($font-size) {\n @include typography.size($font-size, null, true);\n }\n border-radius: get(\"border-radius\");\n // Removed not sure why it was needed, effects buttons with \n // borders (rendering between bg and border)\n // background-clip: padding-box; \n padding: get(\"padding\");\n line-height: get(\"line-height\");\n letter-spacing: get(\"letter-spacing\");\n box-shadow: get(\"box-shadow\");\n margin: get(\"margin\");\n min-width: get(\"min-width\");\n white-space: get(\"white-space\");\n max-width: 100%; // Questionable, not sure if it's needed\n flex-shrink: 0; \n // Should override link visited coloring\n \n @if get(\"transition-enabled\") {\n transition-duration: get(\"transition-duration\");\n transition-property: get(\"transition-properties\");\n }\n &,\n &:visited {\n color: color.get(get(\"color\"));\n border: get(\"border-width\") solid color.get(get(\"border-color\"));\n background-color: color.get(get(\"background-color\"));\n text-decoration: get(\"text-decoration\");\n }\n &:last-child {\n margin-right: 0;\n }\n &:hover,\n &:focus {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n border-color: color.get(get(\"border-color-hover\"));\n text-decoration: get(\"text-decoration\");\n }\n @include when-active() {\n color: color.get(get(\"color-active\"));\n background-color: color.get(get(\"background-color-active\"));\n border-color: color.get(get(\"border-color-active\"));\n }\n",
56420
56417
  "line": {
56421
56418
  "start": 196,
56422
- "end": 253
56419
+ "end": 255
56423
56420
  }
56424
56421
  }
56425
56422
  },
@@ -56428,10 +56425,10 @@
56428
56425
  "context": {
56429
56426
  "type": "mixin",
56430
56427
  "name": "default",
56431
- "code": "\n $font-size: get(\"font-size\");\n @if ($with-reset) {\n @include reset();\n }\n appearance: none; // If used with select for example\n display: inline-block;\n text-transform: get(\"text-transform\");\n text-align: center;\n text-shadow: get(\"text-shadow\");\n vertical-align: middle;\n font-family: get(\"font-family\");\n font-weight: get(\"font-weight\");\n @if ($font-size) {\n @include typography.size($font-size, null, true);\n }\n border-radius: get(\"border-radius\");\n // Removed not sure why it was needed, effects buttons with \n // borders (rendering between bg and border)\n // background-clip: padding-box; \n padding: get(\"padding\");\n line-height: get(\"line-height\");\n letter-spacing: get(\"letter-spacing\");\n box-shadow: get(\"box-shadow\");\n margin: get(\"margin\");\n min-width: get(\"min-width\");\n white-space: get(\"white-space\");\n max-width: 100%; // Questionable, not sure if it's needed\n flex-shrink: 0; \n // Should override link visited coloring\n \n @if get(\"transition-enabled\") {\n transition-duration: get(\"transition-duration\");\n transition-property: get(\"transition-properties\");\n }\n &,\n &:visited {\n color: color.get(get(\"color\"));\n border: get(\"border-width\") solid color.get(get(\"border-color\"));\n background-color: color.get(get(\"background-color\"));\n text-decoration: get(\"text-decoration\");\n }\n &:last-child {\n margin-right: 0;\n }\n &:hover,\n &:focus {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n border-color: color.get(get(\"border-color-hover\"));\n text-decoration: get(\"text-decoration\");\n }\n @include when-active() {\n color: color.get(get(\"color-active\"));\n background-color: color.get(get(\"background-color-active\"));\n border-color: color.get(get(\"border-color-active\"));\n }\n",
56428
+ "code": "\n $font-size: get(\"font-size\");\n @if ($with-reset) {\n @include reset();\n }\n appearance: none; // If used with select for example\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: get(\"gap\");\n text-transform: get(\"text-transform\");\n text-shadow: get(\"text-shadow\");\n vertical-align: middle;\n font-family: get(\"font-family\");\n font-weight: get(\"font-weight\");\n @if ($font-size) {\n @include typography.size($font-size, null, true);\n }\n border-radius: get(\"border-radius\");\n // Removed not sure why it was needed, effects buttons with \n // borders (rendering between bg and border)\n // background-clip: padding-box; \n padding: get(\"padding\");\n line-height: get(\"line-height\");\n letter-spacing: get(\"letter-spacing\");\n box-shadow: get(\"box-shadow\");\n margin: get(\"margin\");\n min-width: get(\"min-width\");\n white-space: get(\"white-space\");\n max-width: 100%; // Questionable, not sure if it's needed\n flex-shrink: 0; \n // Should override link visited coloring\n \n @if get(\"transition-enabled\") {\n transition-duration: get(\"transition-duration\");\n transition-property: get(\"transition-properties\");\n }\n &,\n &:visited {\n color: color.get(get(\"color\"));\n border: get(\"border-width\") solid color.get(get(\"border-color\"));\n background-color: color.get(get(\"background-color\"));\n text-decoration: get(\"text-decoration\");\n }\n &:last-child {\n margin-right: 0;\n }\n &:hover,\n &:focus {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n border-color: color.get(get(\"border-color-hover\"));\n text-decoration: get(\"text-decoration\");\n }\n @include when-active() {\n color: color.get(get(\"color-active\"));\n background-color: color.get(get(\"background-color-active\"));\n border-color: color.get(get(\"border-color-active\"));\n }\n",
56432
56429
  "line": {
56433
56430
  "start": 196,
56434
- "end": 253
56431
+ "end": 255
56435
56432
  }
56436
56433
  }
56437
56434
  },
@@ -56440,10 +56437,10 @@
56440
56437
  "context": {
56441
56438
  "type": "mixin",
56442
56439
  "name": "default",
56443
- "code": "\n $font-size: get(\"font-size\");\n @if ($with-reset) {\n @include reset();\n }\n appearance: none; // If used with select for example\n display: inline-block;\n text-transform: get(\"text-transform\");\n text-align: center;\n text-shadow: get(\"text-shadow\");\n vertical-align: middle;\n font-family: get(\"font-family\");\n font-weight: get(\"font-weight\");\n @if ($font-size) {\n @include typography.size($font-size, null, true);\n }\n border-radius: get(\"border-radius\");\n // Removed not sure why it was needed, effects buttons with \n // borders (rendering between bg and border)\n // background-clip: padding-box; \n padding: get(\"padding\");\n line-height: get(\"line-height\");\n letter-spacing: get(\"letter-spacing\");\n box-shadow: get(\"box-shadow\");\n margin: get(\"margin\");\n min-width: get(\"min-width\");\n white-space: get(\"white-space\");\n max-width: 100%; // Questionable, not sure if it's needed\n flex-shrink: 0; \n // Should override link visited coloring\n \n @if get(\"transition-enabled\") {\n transition-duration: get(\"transition-duration\");\n transition-property: get(\"transition-properties\");\n }\n &,\n &:visited {\n color: color.get(get(\"color\"));\n border: get(\"border-width\") solid color.get(get(\"border-color\"));\n background-color: color.get(get(\"background-color\"));\n text-decoration: get(\"text-decoration\");\n }\n &:last-child {\n margin-right: 0;\n }\n &:hover,\n &:focus {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n border-color: color.get(get(\"border-color-hover\"));\n text-decoration: get(\"text-decoration\");\n }\n @include when-active() {\n color: color.get(get(\"color-active\"));\n background-color: color.get(get(\"background-color-active\"));\n border-color: color.get(get(\"border-color-active\"));\n }\n",
56440
+ "code": "\n $font-size: get(\"font-size\");\n @if ($with-reset) {\n @include reset();\n }\n appearance: none; // If used with select for example\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: get(\"gap\");\n text-transform: get(\"text-transform\");\n text-shadow: get(\"text-shadow\");\n vertical-align: middle;\n font-family: get(\"font-family\");\n font-weight: get(\"font-weight\");\n @if ($font-size) {\n @include typography.size($font-size, null, true);\n }\n border-radius: get(\"border-radius\");\n // Removed not sure why it was needed, effects buttons with \n // borders (rendering between bg and border)\n // background-clip: padding-box; \n padding: get(\"padding\");\n line-height: get(\"line-height\");\n letter-spacing: get(\"letter-spacing\");\n box-shadow: get(\"box-shadow\");\n margin: get(\"margin\");\n min-width: get(\"min-width\");\n white-space: get(\"white-space\");\n max-width: 100%; // Questionable, not sure if it's needed\n flex-shrink: 0; \n // Should override link visited coloring\n \n @if get(\"transition-enabled\") {\n transition-duration: get(\"transition-duration\");\n transition-property: get(\"transition-properties\");\n }\n &,\n &:visited {\n color: color.get(get(\"color\"));\n border: get(\"border-width\") solid color.get(get(\"border-color\"));\n background-color: color.get(get(\"background-color\"));\n text-decoration: get(\"text-decoration\");\n }\n &:last-child {\n margin-right: 0;\n }\n &:hover,\n &:focus {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n border-color: color.get(get(\"border-color-hover\"));\n text-decoration: get(\"text-decoration\");\n }\n @include when-active() {\n color: color.get(get(\"color-active\"));\n background-color: color.get(get(\"background-color-active\"));\n border-color: color.get(get(\"border-color-active\"));\n }\n",
56444
56441
  "line": {
56445
56442
  "start": 196,
56446
- "end": 253
56443
+ "end": 255
56447
56444
  }
56448
56445
  }
56449
56446
  },
@@ -56452,10 +56449,10 @@
56452
56449
  "context": {
56453
56450
  "type": "mixin",
56454
56451
  "name": "default",
56455
- "code": "\n $font-size: get(\"font-size\");\n @if ($with-reset) {\n @include reset();\n }\n appearance: none; // If used with select for example\n display: inline-block;\n text-transform: get(\"text-transform\");\n text-align: center;\n text-shadow: get(\"text-shadow\");\n vertical-align: middle;\n font-family: get(\"font-family\");\n font-weight: get(\"font-weight\");\n @if ($font-size) {\n @include typography.size($font-size, null, true);\n }\n border-radius: get(\"border-radius\");\n // Removed not sure why it was needed, effects buttons with \n // borders (rendering between bg and border)\n // background-clip: padding-box; \n padding: get(\"padding\");\n line-height: get(\"line-height\");\n letter-spacing: get(\"letter-spacing\");\n box-shadow: get(\"box-shadow\");\n margin: get(\"margin\");\n min-width: get(\"min-width\");\n white-space: get(\"white-space\");\n max-width: 100%; // Questionable, not sure if it's needed\n flex-shrink: 0; \n // Should override link visited coloring\n \n @if get(\"transition-enabled\") {\n transition-duration: get(\"transition-duration\");\n transition-property: get(\"transition-properties\");\n }\n &,\n &:visited {\n color: color.get(get(\"color\"));\n border: get(\"border-width\") solid color.get(get(\"border-color\"));\n background-color: color.get(get(\"background-color\"));\n text-decoration: get(\"text-decoration\");\n }\n &:last-child {\n margin-right: 0;\n }\n &:hover,\n &:focus {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n border-color: color.get(get(\"border-color-hover\"));\n text-decoration: get(\"text-decoration\");\n }\n @include when-active() {\n color: color.get(get(\"color-active\"));\n background-color: color.get(get(\"background-color-active\"));\n border-color: color.get(get(\"border-color-active\"));\n }\n",
56452
+ "code": "\n $font-size: get(\"font-size\");\n @if ($with-reset) {\n @include reset();\n }\n appearance: none; // If used with select for example\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: get(\"gap\");\n text-transform: get(\"text-transform\");\n text-shadow: get(\"text-shadow\");\n vertical-align: middle;\n font-family: get(\"font-family\");\n font-weight: get(\"font-weight\");\n @if ($font-size) {\n @include typography.size($font-size, null, true);\n }\n border-radius: get(\"border-radius\");\n // Removed not sure why it was needed, effects buttons with \n // borders (rendering between bg and border)\n // background-clip: padding-box; \n padding: get(\"padding\");\n line-height: get(\"line-height\");\n letter-spacing: get(\"letter-spacing\");\n box-shadow: get(\"box-shadow\");\n margin: get(\"margin\");\n min-width: get(\"min-width\");\n white-space: get(\"white-space\");\n max-width: 100%; // Questionable, not sure if it's needed\n flex-shrink: 0; \n // Should override link visited coloring\n \n @if get(\"transition-enabled\") {\n transition-duration: get(\"transition-duration\");\n transition-property: get(\"transition-properties\");\n }\n &,\n &:visited {\n color: color.get(get(\"color\"));\n border: get(\"border-width\") solid color.get(get(\"border-color\"));\n background-color: color.get(get(\"background-color\"));\n text-decoration: get(\"text-decoration\");\n }\n &:last-child {\n margin-right: 0;\n }\n &:hover,\n &:focus {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n border-color: color.get(get(\"border-color-hover\"));\n text-decoration: get(\"text-decoration\");\n }\n @include when-active() {\n color: color.get(get(\"color-active\"));\n background-color: color.get(get(\"background-color-active\"));\n border-color: color.get(get(\"border-color-active\"));\n }\n",
56456
56453
  "line": {
56457
56454
  "start": 196,
56458
- "end": 253
56455
+ "end": 255
56459
56456
  }
56460
56457
  }
56461
56458
  },
@@ -56464,10 +56461,10 @@
56464
56461
  "context": {
56465
56462
  "type": "mixin",
56466
56463
  "name": "default",
56467
- "code": "\n $font-size: get(\"font-size\");\n @if ($with-reset) {\n @include reset();\n }\n appearance: none; // If used with select for example\n display: inline-block;\n text-transform: get(\"text-transform\");\n text-align: center;\n text-shadow: get(\"text-shadow\");\n vertical-align: middle;\n font-family: get(\"font-family\");\n font-weight: get(\"font-weight\");\n @if ($font-size) {\n @include typography.size($font-size, null, true);\n }\n border-radius: get(\"border-radius\");\n // Removed not sure why it was needed, effects buttons with \n // borders (rendering between bg and border)\n // background-clip: padding-box; \n padding: get(\"padding\");\n line-height: get(\"line-height\");\n letter-spacing: get(\"letter-spacing\");\n box-shadow: get(\"box-shadow\");\n margin: get(\"margin\");\n min-width: get(\"min-width\");\n white-space: get(\"white-space\");\n max-width: 100%; // Questionable, not sure if it's needed\n flex-shrink: 0; \n // Should override link visited coloring\n \n @if get(\"transition-enabled\") {\n transition-duration: get(\"transition-duration\");\n transition-property: get(\"transition-properties\");\n }\n &,\n &:visited {\n color: color.get(get(\"color\"));\n border: get(\"border-width\") solid color.get(get(\"border-color\"));\n background-color: color.get(get(\"background-color\"));\n text-decoration: get(\"text-decoration\");\n }\n &:last-child {\n margin-right: 0;\n }\n &:hover,\n &:focus {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n border-color: color.get(get(\"border-color-hover\"));\n text-decoration: get(\"text-decoration\");\n }\n @include when-active() {\n color: color.get(get(\"color-active\"));\n background-color: color.get(get(\"background-color-active\"));\n border-color: color.get(get(\"border-color-active\"));\n }\n",
56464
+ "code": "\n $font-size: get(\"font-size\");\n @if ($with-reset) {\n @include reset();\n }\n appearance: none; // If used with select for example\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: get(\"gap\");\n text-transform: get(\"text-transform\");\n text-shadow: get(\"text-shadow\");\n vertical-align: middle;\n font-family: get(\"font-family\");\n font-weight: get(\"font-weight\");\n @if ($font-size) {\n @include typography.size($font-size, null, true);\n }\n border-radius: get(\"border-radius\");\n // Removed not sure why it was needed, effects buttons with \n // borders (rendering between bg and border)\n // background-clip: padding-box; \n padding: get(\"padding\");\n line-height: get(\"line-height\");\n letter-spacing: get(\"letter-spacing\");\n box-shadow: get(\"box-shadow\");\n margin: get(\"margin\");\n min-width: get(\"min-width\");\n white-space: get(\"white-space\");\n max-width: 100%; // Questionable, not sure if it's needed\n flex-shrink: 0; \n // Should override link visited coloring\n \n @if get(\"transition-enabled\") {\n transition-duration: get(\"transition-duration\");\n transition-property: get(\"transition-properties\");\n }\n &,\n &:visited {\n color: color.get(get(\"color\"));\n border: get(\"border-width\") solid color.get(get(\"border-color\"));\n background-color: color.get(get(\"background-color\"));\n text-decoration: get(\"text-decoration\");\n }\n &:last-child {\n margin-right: 0;\n }\n &:hover,\n &:focus {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n border-color: color.get(get(\"border-color-hover\"));\n text-decoration: get(\"text-decoration\");\n }\n @include when-active() {\n color: color.get(get(\"color-active\"));\n background-color: color.get(get(\"background-color-active\"));\n border-color: color.get(get(\"border-color-active\"));\n }\n",
56468
56465
  "line": {
56469
56466
  "start": 196,
56470
- "end": 253
56467
+ "end": 255
56471
56468
  }
56472
56469
  }
56473
56470
  },
@@ -56476,10 +56473,10 @@
56476
56473
  "context": {
56477
56474
  "type": "mixin",
56478
56475
  "name": "default",
56479
- "code": "\n $font-size: get(\"font-size\");\n @if ($with-reset) {\n @include reset();\n }\n appearance: none; // If used with select for example\n display: inline-block;\n text-transform: get(\"text-transform\");\n text-align: center;\n text-shadow: get(\"text-shadow\");\n vertical-align: middle;\n font-family: get(\"font-family\");\n font-weight: get(\"font-weight\");\n @if ($font-size) {\n @include typography.size($font-size, null, true);\n }\n border-radius: get(\"border-radius\");\n // Removed not sure why it was needed, effects buttons with \n // borders (rendering between bg and border)\n // background-clip: padding-box; \n padding: get(\"padding\");\n line-height: get(\"line-height\");\n letter-spacing: get(\"letter-spacing\");\n box-shadow: get(\"box-shadow\");\n margin: get(\"margin\");\n min-width: get(\"min-width\");\n white-space: get(\"white-space\");\n max-width: 100%; // Questionable, not sure if it's needed\n flex-shrink: 0; \n // Should override link visited coloring\n \n @if get(\"transition-enabled\") {\n transition-duration: get(\"transition-duration\");\n transition-property: get(\"transition-properties\");\n }\n &,\n &:visited {\n color: color.get(get(\"color\"));\n border: get(\"border-width\") solid color.get(get(\"border-color\"));\n background-color: color.get(get(\"background-color\"));\n text-decoration: get(\"text-decoration\");\n }\n &:last-child {\n margin-right: 0;\n }\n &:hover,\n &:focus {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n border-color: color.get(get(\"border-color-hover\"));\n text-decoration: get(\"text-decoration\");\n }\n @include when-active() {\n color: color.get(get(\"color-active\"));\n background-color: color.get(get(\"background-color-active\"));\n border-color: color.get(get(\"border-color-active\"));\n }\n",
56476
+ "code": "\n $font-size: get(\"font-size\");\n @if ($with-reset) {\n @include reset();\n }\n appearance: none; // If used with select for example\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: get(\"gap\");\n text-transform: get(\"text-transform\");\n text-shadow: get(\"text-shadow\");\n vertical-align: middle;\n font-family: get(\"font-family\");\n font-weight: get(\"font-weight\");\n @if ($font-size) {\n @include typography.size($font-size, null, true);\n }\n border-radius: get(\"border-radius\");\n // Removed not sure why it was needed, effects buttons with \n // borders (rendering between bg and border)\n // background-clip: padding-box; \n padding: get(\"padding\");\n line-height: get(\"line-height\");\n letter-spacing: get(\"letter-spacing\");\n box-shadow: get(\"box-shadow\");\n margin: get(\"margin\");\n min-width: get(\"min-width\");\n white-space: get(\"white-space\");\n max-width: 100%; // Questionable, not sure if it's needed\n flex-shrink: 0; \n // Should override link visited coloring\n \n @if get(\"transition-enabled\") {\n transition-duration: get(\"transition-duration\");\n transition-property: get(\"transition-properties\");\n }\n &,\n &:visited {\n color: color.get(get(\"color\"));\n border: get(\"border-width\") solid color.get(get(\"border-color\"));\n background-color: color.get(get(\"background-color\"));\n text-decoration: get(\"text-decoration\");\n }\n &:last-child {\n margin-right: 0;\n }\n &:hover,\n &:focus {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n border-color: color.get(get(\"border-color-hover\"));\n text-decoration: get(\"text-decoration\");\n }\n @include when-active() {\n color: color.get(get(\"color-active\"));\n background-color: color.get(get(\"background-color-active\"));\n border-color: color.get(get(\"border-color-active\"));\n }\n",
56480
56477
  "line": {
56481
56478
  "start": 196,
56482
- "end": 253
56479
+ "end": 255
56483
56480
  }
56484
56481
  }
56485
56482
  },
@@ -56488,10 +56485,10 @@
56488
56485
  "context": {
56489
56486
  "type": "mixin",
56490
56487
  "name": "default",
56491
- "code": "\n $font-size: get(\"font-size\");\n @if ($with-reset) {\n @include reset();\n }\n appearance: none; // If used with select for example\n display: inline-block;\n text-transform: get(\"text-transform\");\n text-align: center;\n text-shadow: get(\"text-shadow\");\n vertical-align: middle;\n font-family: get(\"font-family\");\n font-weight: get(\"font-weight\");\n @if ($font-size) {\n @include typography.size($font-size, null, true);\n }\n border-radius: get(\"border-radius\");\n // Removed not sure why it was needed, effects buttons with \n // borders (rendering between bg and border)\n // background-clip: padding-box; \n padding: get(\"padding\");\n line-height: get(\"line-height\");\n letter-spacing: get(\"letter-spacing\");\n box-shadow: get(\"box-shadow\");\n margin: get(\"margin\");\n min-width: get(\"min-width\");\n white-space: get(\"white-space\");\n max-width: 100%; // Questionable, not sure if it's needed\n flex-shrink: 0; \n // Should override link visited coloring\n \n @if get(\"transition-enabled\") {\n transition-duration: get(\"transition-duration\");\n transition-property: get(\"transition-properties\");\n }\n &,\n &:visited {\n color: color.get(get(\"color\"));\n border: get(\"border-width\") solid color.get(get(\"border-color\"));\n background-color: color.get(get(\"background-color\"));\n text-decoration: get(\"text-decoration\");\n }\n &:last-child {\n margin-right: 0;\n }\n &:hover,\n &:focus {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n border-color: color.get(get(\"border-color-hover\"));\n text-decoration: get(\"text-decoration\");\n }\n @include when-active() {\n color: color.get(get(\"color-active\"));\n background-color: color.get(get(\"background-color-active\"));\n border-color: color.get(get(\"border-color-active\"));\n }\n",
56488
+ "code": "\n $font-size: get(\"font-size\");\n @if ($with-reset) {\n @include reset();\n }\n appearance: none; // If used with select for example\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: get(\"gap\");\n text-transform: get(\"text-transform\");\n text-shadow: get(\"text-shadow\");\n vertical-align: middle;\n font-family: get(\"font-family\");\n font-weight: get(\"font-weight\");\n @if ($font-size) {\n @include typography.size($font-size, null, true);\n }\n border-radius: get(\"border-radius\");\n // Removed not sure why it was needed, effects buttons with \n // borders (rendering between bg and border)\n // background-clip: padding-box; \n padding: get(\"padding\");\n line-height: get(\"line-height\");\n letter-spacing: get(\"letter-spacing\");\n box-shadow: get(\"box-shadow\");\n margin: get(\"margin\");\n min-width: get(\"min-width\");\n white-space: get(\"white-space\");\n max-width: 100%; // Questionable, not sure if it's needed\n flex-shrink: 0; \n // Should override link visited coloring\n \n @if get(\"transition-enabled\") {\n transition-duration: get(\"transition-duration\");\n transition-property: get(\"transition-properties\");\n }\n &,\n &:visited {\n color: color.get(get(\"color\"));\n border: get(\"border-width\") solid color.get(get(\"border-color\"));\n background-color: color.get(get(\"background-color\"));\n text-decoration: get(\"text-decoration\");\n }\n &:last-child {\n margin-right: 0;\n }\n &:hover,\n &:focus {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n border-color: color.get(get(\"border-color-hover\"));\n text-decoration: get(\"text-decoration\");\n }\n @include when-active() {\n color: color.get(get(\"color-active\"));\n background-color: color.get(get(\"background-color-active\"));\n border-color: color.get(get(\"border-color-active\"));\n }\n",
56492
56489
  "line": {
56493
56490
  "start": 196,
56494
- "end": 253
56491
+ "end": 255
56495
56492
  }
56496
56493
  }
56497
56494
  },
@@ -56500,10 +56497,10 @@
56500
56497
  "context": {
56501
56498
  "type": "mixin",
56502
56499
  "name": "default",
56503
- "code": "\n $font-size: get(\"font-size\");\n @if ($with-reset) {\n @include reset();\n }\n appearance: none; // If used with select for example\n display: inline-block;\n text-transform: get(\"text-transform\");\n text-align: center;\n text-shadow: get(\"text-shadow\");\n vertical-align: middle;\n font-family: get(\"font-family\");\n font-weight: get(\"font-weight\");\n @if ($font-size) {\n @include typography.size($font-size, null, true);\n }\n border-radius: get(\"border-radius\");\n // Removed not sure why it was needed, effects buttons with \n // borders (rendering between bg and border)\n // background-clip: padding-box; \n padding: get(\"padding\");\n line-height: get(\"line-height\");\n letter-spacing: get(\"letter-spacing\");\n box-shadow: get(\"box-shadow\");\n margin: get(\"margin\");\n min-width: get(\"min-width\");\n white-space: get(\"white-space\");\n max-width: 100%; // Questionable, not sure if it's needed\n flex-shrink: 0; \n // Should override link visited coloring\n \n @if get(\"transition-enabled\") {\n transition-duration: get(\"transition-duration\");\n transition-property: get(\"transition-properties\");\n }\n &,\n &:visited {\n color: color.get(get(\"color\"));\n border: get(\"border-width\") solid color.get(get(\"border-color\"));\n background-color: color.get(get(\"background-color\"));\n text-decoration: get(\"text-decoration\");\n }\n &:last-child {\n margin-right: 0;\n }\n &:hover,\n &:focus {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n border-color: color.get(get(\"border-color-hover\"));\n text-decoration: get(\"text-decoration\");\n }\n @include when-active() {\n color: color.get(get(\"color-active\"));\n background-color: color.get(get(\"background-color-active\"));\n border-color: color.get(get(\"border-color-active\"));\n }\n",
56500
+ "code": "\n $font-size: get(\"font-size\");\n @if ($with-reset) {\n @include reset();\n }\n appearance: none; // If used with select for example\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: get(\"gap\");\n text-transform: get(\"text-transform\");\n text-shadow: get(\"text-shadow\");\n vertical-align: middle;\n font-family: get(\"font-family\");\n font-weight: get(\"font-weight\");\n @if ($font-size) {\n @include typography.size($font-size, null, true);\n }\n border-radius: get(\"border-radius\");\n // Removed not sure why it was needed, effects buttons with \n // borders (rendering between bg and border)\n // background-clip: padding-box; \n padding: get(\"padding\");\n line-height: get(\"line-height\");\n letter-spacing: get(\"letter-spacing\");\n box-shadow: get(\"box-shadow\");\n margin: get(\"margin\");\n min-width: get(\"min-width\");\n white-space: get(\"white-space\");\n max-width: 100%; // Questionable, not sure if it's needed\n flex-shrink: 0; \n // Should override link visited coloring\n \n @if get(\"transition-enabled\") {\n transition-duration: get(\"transition-duration\");\n transition-property: get(\"transition-properties\");\n }\n &,\n &:visited {\n color: color.get(get(\"color\"));\n border: get(\"border-width\") solid color.get(get(\"border-color\"));\n background-color: color.get(get(\"background-color\"));\n text-decoration: get(\"text-decoration\");\n }\n &:last-child {\n margin-right: 0;\n }\n &:hover,\n &:focus {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n border-color: color.get(get(\"border-color-hover\"));\n text-decoration: get(\"text-decoration\");\n }\n @include when-active() {\n color: color.get(get(\"color-active\"));\n background-color: color.get(get(\"background-color-active\"));\n border-color: color.get(get(\"border-color-active\"));\n }\n",
56504
56501
  "line": {
56505
56502
  "start": 196,
56506
- "end": 253
56503
+ "end": 255
56507
56504
  }
56508
56505
  }
56509
56506
  },
@@ -56512,10 +56509,10 @@
56512
56509
  "context": {
56513
56510
  "type": "mixin",
56514
56511
  "name": "default",
56515
- "code": "\n $font-size: get(\"font-size\");\n @if ($with-reset) {\n @include reset();\n }\n appearance: none; // If used with select for example\n display: inline-block;\n text-transform: get(\"text-transform\");\n text-align: center;\n text-shadow: get(\"text-shadow\");\n vertical-align: middle;\n font-family: get(\"font-family\");\n font-weight: get(\"font-weight\");\n @if ($font-size) {\n @include typography.size($font-size, null, true);\n }\n border-radius: get(\"border-radius\");\n // Removed not sure why it was needed, effects buttons with \n // borders (rendering between bg and border)\n // background-clip: padding-box; \n padding: get(\"padding\");\n line-height: get(\"line-height\");\n letter-spacing: get(\"letter-spacing\");\n box-shadow: get(\"box-shadow\");\n margin: get(\"margin\");\n min-width: get(\"min-width\");\n white-space: get(\"white-space\");\n max-width: 100%; // Questionable, not sure if it's needed\n flex-shrink: 0; \n // Should override link visited coloring\n \n @if get(\"transition-enabled\") {\n transition-duration: get(\"transition-duration\");\n transition-property: get(\"transition-properties\");\n }\n &,\n &:visited {\n color: color.get(get(\"color\"));\n border: get(\"border-width\") solid color.get(get(\"border-color\"));\n background-color: color.get(get(\"background-color\"));\n text-decoration: get(\"text-decoration\");\n }\n &:last-child {\n margin-right: 0;\n }\n &:hover,\n &:focus {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n border-color: color.get(get(\"border-color-hover\"));\n text-decoration: get(\"text-decoration\");\n }\n @include when-active() {\n color: color.get(get(\"color-active\"));\n background-color: color.get(get(\"background-color-active\"));\n border-color: color.get(get(\"border-color-active\"));\n }\n",
56512
+ "code": "\n $font-size: get(\"font-size\");\n @if ($with-reset) {\n @include reset();\n }\n appearance: none; // If used with select for example\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: get(\"gap\");\n text-transform: get(\"text-transform\");\n text-shadow: get(\"text-shadow\");\n vertical-align: middle;\n font-family: get(\"font-family\");\n font-weight: get(\"font-weight\");\n @if ($font-size) {\n @include typography.size($font-size, null, true);\n }\n border-radius: get(\"border-radius\");\n // Removed not sure why it was needed, effects buttons with \n // borders (rendering between bg and border)\n // background-clip: padding-box; \n padding: get(\"padding\");\n line-height: get(\"line-height\");\n letter-spacing: get(\"letter-spacing\");\n box-shadow: get(\"box-shadow\");\n margin: get(\"margin\");\n min-width: get(\"min-width\");\n white-space: get(\"white-space\");\n max-width: 100%; // Questionable, not sure if it's needed\n flex-shrink: 0; \n // Should override link visited coloring\n \n @if get(\"transition-enabled\") {\n transition-duration: get(\"transition-duration\");\n transition-property: get(\"transition-properties\");\n }\n &,\n &:visited {\n color: color.get(get(\"color\"));\n border: get(\"border-width\") solid color.get(get(\"border-color\"));\n background-color: color.get(get(\"background-color\"));\n text-decoration: get(\"text-decoration\");\n }\n &:last-child {\n margin-right: 0;\n }\n &:hover,\n &:focus {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n border-color: color.get(get(\"border-color-hover\"));\n text-decoration: get(\"text-decoration\");\n }\n @include when-active() {\n color: color.get(get(\"color-active\"));\n background-color: color.get(get(\"background-color-active\"));\n border-color: color.get(get(\"border-color-active\"));\n }\n",
56516
56513
  "line": {
56517
56514
  "start": 196,
56518
- "end": 253
56515
+ "end": 255
56519
56516
  }
56520
56517
  }
56521
56518
  },
@@ -56524,10 +56521,10 @@
56524
56521
  "context": {
56525
56522
  "type": "mixin",
56526
56523
  "name": "default",
56527
- "code": "\n $font-size: get(\"font-size\");\n @if ($with-reset) {\n @include reset();\n }\n appearance: none; // If used with select for example\n display: inline-block;\n text-transform: get(\"text-transform\");\n text-align: center;\n text-shadow: get(\"text-shadow\");\n vertical-align: middle;\n font-family: get(\"font-family\");\n font-weight: get(\"font-weight\");\n @if ($font-size) {\n @include typography.size($font-size, null, true);\n }\n border-radius: get(\"border-radius\");\n // Removed not sure why it was needed, effects buttons with \n // borders (rendering between bg and border)\n // background-clip: padding-box; \n padding: get(\"padding\");\n line-height: get(\"line-height\");\n letter-spacing: get(\"letter-spacing\");\n box-shadow: get(\"box-shadow\");\n margin: get(\"margin\");\n min-width: get(\"min-width\");\n white-space: get(\"white-space\");\n max-width: 100%; // Questionable, not sure if it's needed\n flex-shrink: 0; \n // Should override link visited coloring\n \n @if get(\"transition-enabled\") {\n transition-duration: get(\"transition-duration\");\n transition-property: get(\"transition-properties\");\n }\n &,\n &:visited {\n color: color.get(get(\"color\"));\n border: get(\"border-width\") solid color.get(get(\"border-color\"));\n background-color: color.get(get(\"background-color\"));\n text-decoration: get(\"text-decoration\");\n }\n &:last-child {\n margin-right: 0;\n }\n &:hover,\n &:focus {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n border-color: color.get(get(\"border-color-hover\"));\n text-decoration: get(\"text-decoration\");\n }\n @include when-active() {\n color: color.get(get(\"color-active\"));\n background-color: color.get(get(\"background-color-active\"));\n border-color: color.get(get(\"border-color-active\"));\n }\n",
56524
+ "code": "\n $font-size: get(\"font-size\");\n @if ($with-reset) {\n @include reset();\n }\n appearance: none; // If used with select for example\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: get(\"gap\");\n text-transform: get(\"text-transform\");\n text-shadow: get(\"text-shadow\");\n vertical-align: middle;\n font-family: get(\"font-family\");\n font-weight: get(\"font-weight\");\n @if ($font-size) {\n @include typography.size($font-size, null, true);\n }\n border-radius: get(\"border-radius\");\n // Removed not sure why it was needed, effects buttons with \n // borders (rendering between bg and border)\n // background-clip: padding-box; \n padding: get(\"padding\");\n line-height: get(\"line-height\");\n letter-spacing: get(\"letter-spacing\");\n box-shadow: get(\"box-shadow\");\n margin: get(\"margin\");\n min-width: get(\"min-width\");\n white-space: get(\"white-space\");\n max-width: 100%; // Questionable, not sure if it's needed\n flex-shrink: 0; \n // Should override link visited coloring\n \n @if get(\"transition-enabled\") {\n transition-duration: get(\"transition-duration\");\n transition-property: get(\"transition-properties\");\n }\n &,\n &:visited {\n color: color.get(get(\"color\"));\n border: get(\"border-width\") solid color.get(get(\"border-color\"));\n background-color: color.get(get(\"background-color\"));\n text-decoration: get(\"text-decoration\");\n }\n &:last-child {\n margin-right: 0;\n }\n &:hover,\n &:focus {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n border-color: color.get(get(\"border-color-hover\"));\n text-decoration: get(\"text-decoration\");\n }\n @include when-active() {\n color: color.get(get(\"color-active\"));\n background-color: color.get(get(\"background-color-active\"));\n border-color: color.get(get(\"border-color-active\"));\n }\n",
56528
56525
  "line": {
56529
56526
  "start": 196,
56530
- "end": 253
56527
+ "end": 255
56531
56528
  }
56532
56529
  }
56533
56530
  },
@@ -56536,10 +56533,10 @@
56536
56533
  "context": {
56537
56534
  "type": "mixin",
56538
56535
  "name": "default",
56539
- "code": "\n $font-size: get(\"font-size\");\n @if ($with-reset) {\n @include reset();\n }\n appearance: none; // If used with select for example\n display: inline-block;\n text-transform: get(\"text-transform\");\n text-align: center;\n text-shadow: get(\"text-shadow\");\n vertical-align: middle;\n font-family: get(\"font-family\");\n font-weight: get(\"font-weight\");\n @if ($font-size) {\n @include typography.size($font-size, null, true);\n }\n border-radius: get(\"border-radius\");\n // Removed not sure why it was needed, effects buttons with \n // borders (rendering between bg and border)\n // background-clip: padding-box; \n padding: get(\"padding\");\n line-height: get(\"line-height\");\n letter-spacing: get(\"letter-spacing\");\n box-shadow: get(\"box-shadow\");\n margin: get(\"margin\");\n min-width: get(\"min-width\");\n white-space: get(\"white-space\");\n max-width: 100%; // Questionable, not sure if it's needed\n flex-shrink: 0; \n // Should override link visited coloring\n \n @if get(\"transition-enabled\") {\n transition-duration: get(\"transition-duration\");\n transition-property: get(\"transition-properties\");\n }\n &,\n &:visited {\n color: color.get(get(\"color\"));\n border: get(\"border-width\") solid color.get(get(\"border-color\"));\n background-color: color.get(get(\"background-color\"));\n text-decoration: get(\"text-decoration\");\n }\n &:last-child {\n margin-right: 0;\n }\n &:hover,\n &:focus {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n border-color: color.get(get(\"border-color-hover\"));\n text-decoration: get(\"text-decoration\");\n }\n @include when-active() {\n color: color.get(get(\"color-active\"));\n background-color: color.get(get(\"background-color-active\"));\n border-color: color.get(get(\"border-color-active\"));\n }\n",
56536
+ "code": "\n $font-size: get(\"font-size\");\n @if ($with-reset) {\n @include reset();\n }\n appearance: none; // If used with select for example\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: get(\"gap\");\n text-transform: get(\"text-transform\");\n text-shadow: get(\"text-shadow\");\n vertical-align: middle;\n font-family: get(\"font-family\");\n font-weight: get(\"font-weight\");\n @if ($font-size) {\n @include typography.size($font-size, null, true);\n }\n border-radius: get(\"border-radius\");\n // Removed not sure why it was needed, effects buttons with \n // borders (rendering between bg and border)\n // background-clip: padding-box; \n padding: get(\"padding\");\n line-height: get(\"line-height\");\n letter-spacing: get(\"letter-spacing\");\n box-shadow: get(\"box-shadow\");\n margin: get(\"margin\");\n min-width: get(\"min-width\");\n white-space: get(\"white-space\");\n max-width: 100%; // Questionable, not sure if it's needed\n flex-shrink: 0; \n // Should override link visited coloring\n \n @if get(\"transition-enabled\") {\n transition-duration: get(\"transition-duration\");\n transition-property: get(\"transition-properties\");\n }\n &,\n &:visited {\n color: color.get(get(\"color\"));\n border: get(\"border-width\") solid color.get(get(\"border-color\"));\n background-color: color.get(get(\"background-color\"));\n text-decoration: get(\"text-decoration\");\n }\n &:last-child {\n margin-right: 0;\n }\n &:hover,\n &:focus {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n border-color: color.get(get(\"border-color-hover\"));\n text-decoration: get(\"text-decoration\");\n }\n @include when-active() {\n color: color.get(get(\"color-active\"));\n background-color: color.get(get(\"background-color-active\"));\n border-color: color.get(get(\"border-color-active\"));\n }\n",
56540
56537
  "line": {
56541
56538
  "start": 196,
56542
- "end": 253
56539
+ "end": 255
56543
56540
  }
56544
56541
  }
56545
56542
  },
@@ -56548,10 +56545,10 @@
56548
56545
  "context": {
56549
56546
  "type": "mixin",
56550
56547
  "name": "default",
56551
- "code": "\n $font-size: get(\"font-size\");\n @if ($with-reset) {\n @include reset();\n }\n appearance: none; // If used with select for example\n display: inline-block;\n text-transform: get(\"text-transform\");\n text-align: center;\n text-shadow: get(\"text-shadow\");\n vertical-align: middle;\n font-family: get(\"font-family\");\n font-weight: get(\"font-weight\");\n @if ($font-size) {\n @include typography.size($font-size, null, true);\n }\n border-radius: get(\"border-radius\");\n // Removed not sure why it was needed, effects buttons with \n // borders (rendering between bg and border)\n // background-clip: padding-box; \n padding: get(\"padding\");\n line-height: get(\"line-height\");\n letter-spacing: get(\"letter-spacing\");\n box-shadow: get(\"box-shadow\");\n margin: get(\"margin\");\n min-width: get(\"min-width\");\n white-space: get(\"white-space\");\n max-width: 100%; // Questionable, not sure if it's needed\n flex-shrink: 0; \n // Should override link visited coloring\n \n @if get(\"transition-enabled\") {\n transition-duration: get(\"transition-duration\");\n transition-property: get(\"transition-properties\");\n }\n &,\n &:visited {\n color: color.get(get(\"color\"));\n border: get(\"border-width\") solid color.get(get(\"border-color\"));\n background-color: color.get(get(\"background-color\"));\n text-decoration: get(\"text-decoration\");\n }\n &:last-child {\n margin-right: 0;\n }\n &:hover,\n &:focus {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n border-color: color.get(get(\"border-color-hover\"));\n text-decoration: get(\"text-decoration\");\n }\n @include when-active() {\n color: color.get(get(\"color-active\"));\n background-color: color.get(get(\"background-color-active\"));\n border-color: color.get(get(\"border-color-active\"));\n }\n",
56548
+ "code": "\n $font-size: get(\"font-size\");\n @if ($with-reset) {\n @include reset();\n }\n appearance: none; // If used with select for example\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: get(\"gap\");\n text-transform: get(\"text-transform\");\n text-shadow: get(\"text-shadow\");\n vertical-align: middle;\n font-family: get(\"font-family\");\n font-weight: get(\"font-weight\");\n @if ($font-size) {\n @include typography.size($font-size, null, true);\n }\n border-radius: get(\"border-radius\");\n // Removed not sure why it was needed, effects buttons with \n // borders (rendering between bg and border)\n // background-clip: padding-box; \n padding: get(\"padding\");\n line-height: get(\"line-height\");\n letter-spacing: get(\"letter-spacing\");\n box-shadow: get(\"box-shadow\");\n margin: get(\"margin\");\n min-width: get(\"min-width\");\n white-space: get(\"white-space\");\n max-width: 100%; // Questionable, not sure if it's needed\n flex-shrink: 0; \n // Should override link visited coloring\n \n @if get(\"transition-enabled\") {\n transition-duration: get(\"transition-duration\");\n transition-property: get(\"transition-properties\");\n }\n &,\n &:visited {\n color: color.get(get(\"color\"));\n border: get(\"border-width\") solid color.get(get(\"border-color\"));\n background-color: color.get(get(\"background-color\"));\n text-decoration: get(\"text-decoration\");\n }\n &:last-child {\n margin-right: 0;\n }\n &:hover,\n &:focus {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n border-color: color.get(get(\"border-color-hover\"));\n text-decoration: get(\"text-decoration\");\n }\n @include when-active() {\n color: color.get(get(\"color-active\"));\n background-color: color.get(get(\"background-color-active\"));\n border-color: color.get(get(\"border-color-active\"));\n }\n",
56552
56549
  "line": {
56553
56550
  "start": 196,
56554
- "end": 253
56551
+ "end": 255
56555
56552
  }
56556
56553
  }
56557
56554
  },
@@ -56560,10 +56557,10 @@
56560
56557
  "context": {
56561
56558
  "type": "mixin",
56562
56559
  "name": "default",
56563
- "code": "\n $font-size: get(\"font-size\");\n @if ($with-reset) {\n @include reset();\n }\n appearance: none; // If used with select for example\n display: inline-block;\n text-transform: get(\"text-transform\");\n text-align: center;\n text-shadow: get(\"text-shadow\");\n vertical-align: middle;\n font-family: get(\"font-family\");\n font-weight: get(\"font-weight\");\n @if ($font-size) {\n @include typography.size($font-size, null, true);\n }\n border-radius: get(\"border-radius\");\n // Removed not sure why it was needed, effects buttons with \n // borders (rendering between bg and border)\n // background-clip: padding-box; \n padding: get(\"padding\");\n line-height: get(\"line-height\");\n letter-spacing: get(\"letter-spacing\");\n box-shadow: get(\"box-shadow\");\n margin: get(\"margin\");\n min-width: get(\"min-width\");\n white-space: get(\"white-space\");\n max-width: 100%; // Questionable, not sure if it's needed\n flex-shrink: 0; \n // Should override link visited coloring\n \n @if get(\"transition-enabled\") {\n transition-duration: get(\"transition-duration\");\n transition-property: get(\"transition-properties\");\n }\n &,\n &:visited {\n color: color.get(get(\"color\"));\n border: get(\"border-width\") solid color.get(get(\"border-color\"));\n background-color: color.get(get(\"background-color\"));\n text-decoration: get(\"text-decoration\");\n }\n &:last-child {\n margin-right: 0;\n }\n &:hover,\n &:focus {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n border-color: color.get(get(\"border-color-hover\"));\n text-decoration: get(\"text-decoration\");\n }\n @include when-active() {\n color: color.get(get(\"color-active\"));\n background-color: color.get(get(\"background-color-active\"));\n border-color: color.get(get(\"border-color-active\"));\n }\n",
56560
+ "code": "\n $font-size: get(\"font-size\");\n @if ($with-reset) {\n @include reset();\n }\n appearance: none; // If used with select for example\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: get(\"gap\");\n text-transform: get(\"text-transform\");\n text-shadow: get(\"text-shadow\");\n vertical-align: middle;\n font-family: get(\"font-family\");\n font-weight: get(\"font-weight\");\n @if ($font-size) {\n @include typography.size($font-size, null, true);\n }\n border-radius: get(\"border-radius\");\n // Removed not sure why it was needed, effects buttons with \n // borders (rendering between bg and border)\n // background-clip: padding-box; \n padding: get(\"padding\");\n line-height: get(\"line-height\");\n letter-spacing: get(\"letter-spacing\");\n box-shadow: get(\"box-shadow\");\n margin: get(\"margin\");\n min-width: get(\"min-width\");\n white-space: get(\"white-space\");\n max-width: 100%; // Questionable, not sure if it's needed\n flex-shrink: 0; \n // Should override link visited coloring\n \n @if get(\"transition-enabled\") {\n transition-duration: get(\"transition-duration\");\n transition-property: get(\"transition-properties\");\n }\n &,\n &:visited {\n color: color.get(get(\"color\"));\n border: get(\"border-width\") solid color.get(get(\"border-color\"));\n background-color: color.get(get(\"background-color\"));\n text-decoration: get(\"text-decoration\");\n }\n &:last-child {\n margin-right: 0;\n }\n &:hover,\n &:focus {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n border-color: color.get(get(\"border-color-hover\"));\n text-decoration: get(\"text-decoration\");\n }\n @include when-active() {\n color: color.get(get(\"color-active\"));\n background-color: color.get(get(\"background-color-active\"));\n border-color: color.get(get(\"border-color-active\"));\n }\n",
56564
56561
  "line": {
56565
56562
  "start": 196,
56566
- "end": 253
56563
+ "end": 255
56567
56564
  }
56568
56565
  }
56569
56566
  },
@@ -56572,10 +56569,10 @@
56572
56569
  "context": {
56573
56570
  "type": "mixin",
56574
56571
  "name": "default",
56575
- "code": "\n $font-size: get(\"font-size\");\n @if ($with-reset) {\n @include reset();\n }\n appearance: none; // If used with select for example\n display: inline-block;\n text-transform: get(\"text-transform\");\n text-align: center;\n text-shadow: get(\"text-shadow\");\n vertical-align: middle;\n font-family: get(\"font-family\");\n font-weight: get(\"font-weight\");\n @if ($font-size) {\n @include typography.size($font-size, null, true);\n }\n border-radius: get(\"border-radius\");\n // Removed not sure why it was needed, effects buttons with \n // borders (rendering between bg and border)\n // background-clip: padding-box; \n padding: get(\"padding\");\n line-height: get(\"line-height\");\n letter-spacing: get(\"letter-spacing\");\n box-shadow: get(\"box-shadow\");\n margin: get(\"margin\");\n min-width: get(\"min-width\");\n white-space: get(\"white-space\");\n max-width: 100%; // Questionable, not sure if it's needed\n flex-shrink: 0; \n // Should override link visited coloring\n \n @if get(\"transition-enabled\") {\n transition-duration: get(\"transition-duration\");\n transition-property: get(\"transition-properties\");\n }\n &,\n &:visited {\n color: color.get(get(\"color\"));\n border: get(\"border-width\") solid color.get(get(\"border-color\"));\n background-color: color.get(get(\"background-color\"));\n text-decoration: get(\"text-decoration\");\n }\n &:last-child {\n margin-right: 0;\n }\n &:hover,\n &:focus {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n border-color: color.get(get(\"border-color-hover\"));\n text-decoration: get(\"text-decoration\");\n }\n @include when-active() {\n color: color.get(get(\"color-active\"));\n background-color: color.get(get(\"background-color-active\"));\n border-color: color.get(get(\"border-color-active\"));\n }\n",
56572
+ "code": "\n $font-size: get(\"font-size\");\n @if ($with-reset) {\n @include reset();\n }\n appearance: none; // If used with select for example\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: get(\"gap\");\n text-transform: get(\"text-transform\");\n text-shadow: get(\"text-shadow\");\n vertical-align: middle;\n font-family: get(\"font-family\");\n font-weight: get(\"font-weight\");\n @if ($font-size) {\n @include typography.size($font-size, null, true);\n }\n border-radius: get(\"border-radius\");\n // Removed not sure why it was needed, effects buttons with \n // borders (rendering between bg and border)\n // background-clip: padding-box; \n padding: get(\"padding\");\n line-height: get(\"line-height\");\n letter-spacing: get(\"letter-spacing\");\n box-shadow: get(\"box-shadow\");\n margin: get(\"margin\");\n min-width: get(\"min-width\");\n white-space: get(\"white-space\");\n max-width: 100%; // Questionable, not sure if it's needed\n flex-shrink: 0; \n // Should override link visited coloring\n \n @if get(\"transition-enabled\") {\n transition-duration: get(\"transition-duration\");\n transition-property: get(\"transition-properties\");\n }\n &,\n &:visited {\n color: color.get(get(\"color\"));\n border: get(\"border-width\") solid color.get(get(\"border-color\"));\n background-color: color.get(get(\"background-color\"));\n text-decoration: get(\"text-decoration\");\n }\n &:last-child {\n margin-right: 0;\n }\n &:hover,\n &:focus {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n border-color: color.get(get(\"border-color-hover\"));\n text-decoration: get(\"text-decoration\");\n }\n @include when-active() {\n color: color.get(get(\"color-active\"));\n background-color: color.get(get(\"background-color-active\"));\n border-color: color.get(get(\"border-color-active\"));\n }\n",
56576
56573
  "line": {
56577
56574
  "start": 196,
56578
- "end": 253
56575
+ "end": 255
56579
56576
  }
56580
56577
  }
56581
56578
  },
@@ -56584,10 +56581,10 @@
56584
56581
  "context": {
56585
56582
  "type": "mixin",
56586
56583
  "name": "default",
56587
- "code": "\n $font-size: get(\"font-size\");\n @if ($with-reset) {\n @include reset();\n }\n appearance: none; // If used with select for example\n display: inline-block;\n text-transform: get(\"text-transform\");\n text-align: center;\n text-shadow: get(\"text-shadow\");\n vertical-align: middle;\n font-family: get(\"font-family\");\n font-weight: get(\"font-weight\");\n @if ($font-size) {\n @include typography.size($font-size, null, true);\n }\n border-radius: get(\"border-radius\");\n // Removed not sure why it was needed, effects buttons with \n // borders (rendering between bg and border)\n // background-clip: padding-box; \n padding: get(\"padding\");\n line-height: get(\"line-height\");\n letter-spacing: get(\"letter-spacing\");\n box-shadow: get(\"box-shadow\");\n margin: get(\"margin\");\n min-width: get(\"min-width\");\n white-space: get(\"white-space\");\n max-width: 100%; // Questionable, not sure if it's needed\n flex-shrink: 0; \n // Should override link visited coloring\n \n @if get(\"transition-enabled\") {\n transition-duration: get(\"transition-duration\");\n transition-property: get(\"transition-properties\");\n }\n &,\n &:visited {\n color: color.get(get(\"color\"));\n border: get(\"border-width\") solid color.get(get(\"border-color\"));\n background-color: color.get(get(\"background-color\"));\n text-decoration: get(\"text-decoration\");\n }\n &:last-child {\n margin-right: 0;\n }\n &:hover,\n &:focus {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n border-color: color.get(get(\"border-color-hover\"));\n text-decoration: get(\"text-decoration\");\n }\n @include when-active() {\n color: color.get(get(\"color-active\"));\n background-color: color.get(get(\"background-color-active\"));\n border-color: color.get(get(\"border-color-active\"));\n }\n",
56584
+ "code": "\n $font-size: get(\"font-size\");\n @if ($with-reset) {\n @include reset();\n }\n appearance: none; // If used with select for example\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: get(\"gap\");\n text-transform: get(\"text-transform\");\n text-shadow: get(\"text-shadow\");\n vertical-align: middle;\n font-family: get(\"font-family\");\n font-weight: get(\"font-weight\");\n @if ($font-size) {\n @include typography.size($font-size, null, true);\n }\n border-radius: get(\"border-radius\");\n // Removed not sure why it was needed, effects buttons with \n // borders (rendering between bg and border)\n // background-clip: padding-box; \n padding: get(\"padding\");\n line-height: get(\"line-height\");\n letter-spacing: get(\"letter-spacing\");\n box-shadow: get(\"box-shadow\");\n margin: get(\"margin\");\n min-width: get(\"min-width\");\n white-space: get(\"white-space\");\n max-width: 100%; // Questionable, not sure if it's needed\n flex-shrink: 0; \n // Should override link visited coloring\n \n @if get(\"transition-enabled\") {\n transition-duration: get(\"transition-duration\");\n transition-property: get(\"transition-properties\");\n }\n &,\n &:visited {\n color: color.get(get(\"color\"));\n border: get(\"border-width\") solid color.get(get(\"border-color\"));\n background-color: color.get(get(\"background-color\"));\n text-decoration: get(\"text-decoration\");\n }\n &:last-child {\n margin-right: 0;\n }\n &:hover,\n &:focus {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n border-color: color.get(get(\"border-color-hover\"));\n text-decoration: get(\"text-decoration\");\n }\n @include when-active() {\n color: color.get(get(\"color-active\"));\n background-color: color.get(get(\"background-color-active\"));\n border-color: color.get(get(\"border-color-active\"));\n }\n",
56588
56585
  "line": {
56589
56586
  "start": 196,
56590
- "end": 253
56587
+ "end": 255
56591
56588
  }
56592
56589
  }
56593
56590
  },
@@ -56596,10 +56593,10 @@
56596
56593
  "context": {
56597
56594
  "type": "mixin",
56598
56595
  "name": "default",
56599
- "code": "\n $font-size: get(\"font-size\");\n @if ($with-reset) {\n @include reset();\n }\n appearance: none; // If used with select for example\n display: inline-block;\n text-transform: get(\"text-transform\");\n text-align: center;\n text-shadow: get(\"text-shadow\");\n vertical-align: middle;\n font-family: get(\"font-family\");\n font-weight: get(\"font-weight\");\n @if ($font-size) {\n @include typography.size($font-size, null, true);\n }\n border-radius: get(\"border-radius\");\n // Removed not sure why it was needed, effects buttons with \n // borders (rendering between bg and border)\n // background-clip: padding-box; \n padding: get(\"padding\");\n line-height: get(\"line-height\");\n letter-spacing: get(\"letter-spacing\");\n box-shadow: get(\"box-shadow\");\n margin: get(\"margin\");\n min-width: get(\"min-width\");\n white-space: get(\"white-space\");\n max-width: 100%; // Questionable, not sure if it's needed\n flex-shrink: 0; \n // Should override link visited coloring\n \n @if get(\"transition-enabled\") {\n transition-duration: get(\"transition-duration\");\n transition-property: get(\"transition-properties\");\n }\n &,\n &:visited {\n color: color.get(get(\"color\"));\n border: get(\"border-width\") solid color.get(get(\"border-color\"));\n background-color: color.get(get(\"background-color\"));\n text-decoration: get(\"text-decoration\");\n }\n &:last-child {\n margin-right: 0;\n }\n &:hover,\n &:focus {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n border-color: color.get(get(\"border-color-hover\"));\n text-decoration: get(\"text-decoration\");\n }\n @include when-active() {\n color: color.get(get(\"color-active\"));\n background-color: color.get(get(\"background-color-active\"));\n border-color: color.get(get(\"border-color-active\"));\n }\n",
56596
+ "code": "\n $font-size: get(\"font-size\");\n @if ($with-reset) {\n @include reset();\n }\n appearance: none; // If used with select for example\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: get(\"gap\");\n text-transform: get(\"text-transform\");\n text-shadow: get(\"text-shadow\");\n vertical-align: middle;\n font-family: get(\"font-family\");\n font-weight: get(\"font-weight\");\n @if ($font-size) {\n @include typography.size($font-size, null, true);\n }\n border-radius: get(\"border-radius\");\n // Removed not sure why it was needed, effects buttons with \n // borders (rendering between bg and border)\n // background-clip: padding-box; \n padding: get(\"padding\");\n line-height: get(\"line-height\");\n letter-spacing: get(\"letter-spacing\");\n box-shadow: get(\"box-shadow\");\n margin: get(\"margin\");\n min-width: get(\"min-width\");\n white-space: get(\"white-space\");\n max-width: 100%; // Questionable, not sure if it's needed\n flex-shrink: 0; \n // Should override link visited coloring\n \n @if get(\"transition-enabled\") {\n transition-duration: get(\"transition-duration\");\n transition-property: get(\"transition-properties\");\n }\n &,\n &:visited {\n color: color.get(get(\"color\"));\n border: get(\"border-width\") solid color.get(get(\"border-color\"));\n background-color: color.get(get(\"background-color\"));\n text-decoration: get(\"text-decoration\");\n }\n &:last-child {\n margin-right: 0;\n }\n &:hover,\n &:focus {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n border-color: color.get(get(\"border-color-hover\"));\n text-decoration: get(\"text-decoration\");\n }\n @include when-active() {\n color: color.get(get(\"color-active\"));\n background-color: color.get(get(\"background-color-active\"));\n border-color: color.get(get(\"border-color-active\"));\n }\n",
56600
56597
  "line": {
56601
56598
  "start": 196,
56602
- "end": 253
56599
+ "end": 255
56603
56600
  }
56604
56601
  }
56605
56602
  },
@@ -56608,10 +56605,10 @@
56608
56605
  "context": {
56609
56606
  "type": "mixin",
56610
56607
  "name": "default",
56611
- "code": "\n $font-size: get(\"font-size\");\n @if ($with-reset) {\n @include reset();\n }\n appearance: none; // If used with select for example\n display: inline-block;\n text-transform: get(\"text-transform\");\n text-align: center;\n text-shadow: get(\"text-shadow\");\n vertical-align: middle;\n font-family: get(\"font-family\");\n font-weight: get(\"font-weight\");\n @if ($font-size) {\n @include typography.size($font-size, null, true);\n }\n border-radius: get(\"border-radius\");\n // Removed not sure why it was needed, effects buttons with \n // borders (rendering between bg and border)\n // background-clip: padding-box; \n padding: get(\"padding\");\n line-height: get(\"line-height\");\n letter-spacing: get(\"letter-spacing\");\n box-shadow: get(\"box-shadow\");\n margin: get(\"margin\");\n min-width: get(\"min-width\");\n white-space: get(\"white-space\");\n max-width: 100%; // Questionable, not sure if it's needed\n flex-shrink: 0; \n // Should override link visited coloring\n \n @if get(\"transition-enabled\") {\n transition-duration: get(\"transition-duration\");\n transition-property: get(\"transition-properties\");\n }\n &,\n &:visited {\n color: color.get(get(\"color\"));\n border: get(\"border-width\") solid color.get(get(\"border-color\"));\n background-color: color.get(get(\"background-color\"));\n text-decoration: get(\"text-decoration\");\n }\n &:last-child {\n margin-right: 0;\n }\n &:hover,\n &:focus {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n border-color: color.get(get(\"border-color-hover\"));\n text-decoration: get(\"text-decoration\");\n }\n @include when-active() {\n color: color.get(get(\"color-active\"));\n background-color: color.get(get(\"background-color-active\"));\n border-color: color.get(get(\"border-color-active\"));\n }\n",
56608
+ "code": "\n $font-size: get(\"font-size\");\n @if ($with-reset) {\n @include reset();\n }\n appearance: none; // If used with select for example\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: get(\"gap\");\n text-transform: get(\"text-transform\");\n text-shadow: get(\"text-shadow\");\n vertical-align: middle;\n font-family: get(\"font-family\");\n font-weight: get(\"font-weight\");\n @if ($font-size) {\n @include typography.size($font-size, null, true);\n }\n border-radius: get(\"border-radius\");\n // Removed not sure why it was needed, effects buttons with \n // borders (rendering between bg and border)\n // background-clip: padding-box; \n padding: get(\"padding\");\n line-height: get(\"line-height\");\n letter-spacing: get(\"letter-spacing\");\n box-shadow: get(\"box-shadow\");\n margin: get(\"margin\");\n min-width: get(\"min-width\");\n white-space: get(\"white-space\");\n max-width: 100%; // Questionable, not sure if it's needed\n flex-shrink: 0; \n // Should override link visited coloring\n \n @if get(\"transition-enabled\") {\n transition-duration: get(\"transition-duration\");\n transition-property: get(\"transition-properties\");\n }\n &,\n &:visited {\n color: color.get(get(\"color\"));\n border: get(\"border-width\") solid color.get(get(\"border-color\"));\n background-color: color.get(get(\"background-color\"));\n text-decoration: get(\"text-decoration\");\n }\n &:last-child {\n margin-right: 0;\n }\n &:hover,\n &:focus {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n border-color: color.get(get(\"border-color-hover\"));\n text-decoration: get(\"text-decoration\");\n }\n @include when-active() {\n color: color.get(get(\"color-active\"));\n background-color: color.get(get(\"background-color-active\"));\n border-color: color.get(get(\"border-color-active\"));\n }\n",
56612
56609
  "line": {
56613
56610
  "start": 196,
56614
- "end": 253
56611
+ "end": 255
56615
56612
  }
56616
56613
  }
56617
56614
  },
@@ -56620,10 +56617,10 @@
56620
56617
  "context": {
56621
56618
  "type": "mixin",
56622
56619
  "name": "default",
56623
- "code": "\n $font-size: get(\"font-size\");\n @if ($with-reset) {\n @include reset();\n }\n appearance: none; // If used with select for example\n display: inline-block;\n text-transform: get(\"text-transform\");\n text-align: center;\n text-shadow: get(\"text-shadow\");\n vertical-align: middle;\n font-family: get(\"font-family\");\n font-weight: get(\"font-weight\");\n @if ($font-size) {\n @include typography.size($font-size, null, true);\n }\n border-radius: get(\"border-radius\");\n // Removed not sure why it was needed, effects buttons with \n // borders (rendering between bg and border)\n // background-clip: padding-box; \n padding: get(\"padding\");\n line-height: get(\"line-height\");\n letter-spacing: get(\"letter-spacing\");\n box-shadow: get(\"box-shadow\");\n margin: get(\"margin\");\n min-width: get(\"min-width\");\n white-space: get(\"white-space\");\n max-width: 100%; // Questionable, not sure if it's needed\n flex-shrink: 0; \n // Should override link visited coloring\n \n @if get(\"transition-enabled\") {\n transition-duration: get(\"transition-duration\");\n transition-property: get(\"transition-properties\");\n }\n &,\n &:visited {\n color: color.get(get(\"color\"));\n border: get(\"border-width\") solid color.get(get(\"border-color\"));\n background-color: color.get(get(\"background-color\"));\n text-decoration: get(\"text-decoration\");\n }\n &:last-child {\n margin-right: 0;\n }\n &:hover,\n &:focus {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n border-color: color.get(get(\"border-color-hover\"));\n text-decoration: get(\"text-decoration\");\n }\n @include when-active() {\n color: color.get(get(\"color-active\"));\n background-color: color.get(get(\"background-color-active\"));\n border-color: color.get(get(\"border-color-active\"));\n }\n",
56620
+ "code": "\n $font-size: get(\"font-size\");\n @if ($with-reset) {\n @include reset();\n }\n appearance: none; // If used with select for example\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: get(\"gap\");\n text-transform: get(\"text-transform\");\n text-shadow: get(\"text-shadow\");\n vertical-align: middle;\n font-family: get(\"font-family\");\n font-weight: get(\"font-weight\");\n @if ($font-size) {\n @include typography.size($font-size, null, true);\n }\n border-radius: get(\"border-radius\");\n // Removed not sure why it was needed, effects buttons with \n // borders (rendering between bg and border)\n // background-clip: padding-box; \n padding: get(\"padding\");\n line-height: get(\"line-height\");\n letter-spacing: get(\"letter-spacing\");\n box-shadow: get(\"box-shadow\");\n margin: get(\"margin\");\n min-width: get(\"min-width\");\n white-space: get(\"white-space\");\n max-width: 100%; // Questionable, not sure if it's needed\n flex-shrink: 0; \n // Should override link visited coloring\n \n @if get(\"transition-enabled\") {\n transition-duration: get(\"transition-duration\");\n transition-property: get(\"transition-properties\");\n }\n &,\n &:visited {\n color: color.get(get(\"color\"));\n border: get(\"border-width\") solid color.get(get(\"border-color\"));\n background-color: color.get(get(\"background-color\"));\n text-decoration: get(\"text-decoration\");\n }\n &:last-child {\n margin-right: 0;\n }\n &:hover,\n &:focus {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n border-color: color.get(get(\"border-color-hover\"));\n text-decoration: get(\"text-decoration\");\n }\n @include when-active() {\n color: color.get(get(\"color-active\"));\n background-color: color.get(get(\"background-color-active\"));\n border-color: color.get(get(\"border-color-active\"));\n }\n",
56624
56621
  "line": {
56625
56622
  "start": 196,
56626
- "end": 253
56623
+ "end": 255
56627
56624
  }
56628
56625
  }
56629
56626
  },
@@ -56632,10 +56629,10 @@
56632
56629
  "context": {
56633
56630
  "type": "mixin",
56634
56631
  "name": "default",
56635
- "code": "\n $font-size: get(\"font-size\");\n @if ($with-reset) {\n @include reset();\n }\n appearance: none; // If used with select for example\n display: inline-block;\n text-transform: get(\"text-transform\");\n text-align: center;\n text-shadow: get(\"text-shadow\");\n vertical-align: middle;\n font-family: get(\"font-family\");\n font-weight: get(\"font-weight\");\n @if ($font-size) {\n @include typography.size($font-size, null, true);\n }\n border-radius: get(\"border-radius\");\n // Removed not sure why it was needed, effects buttons with \n // borders (rendering between bg and border)\n // background-clip: padding-box; \n padding: get(\"padding\");\n line-height: get(\"line-height\");\n letter-spacing: get(\"letter-spacing\");\n box-shadow: get(\"box-shadow\");\n margin: get(\"margin\");\n min-width: get(\"min-width\");\n white-space: get(\"white-space\");\n max-width: 100%; // Questionable, not sure if it's needed\n flex-shrink: 0; \n // Should override link visited coloring\n \n @if get(\"transition-enabled\") {\n transition-duration: get(\"transition-duration\");\n transition-property: get(\"transition-properties\");\n }\n &,\n &:visited {\n color: color.get(get(\"color\"));\n border: get(\"border-width\") solid color.get(get(\"border-color\"));\n background-color: color.get(get(\"background-color\"));\n text-decoration: get(\"text-decoration\");\n }\n &:last-child {\n margin-right: 0;\n }\n &:hover,\n &:focus {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n border-color: color.get(get(\"border-color-hover\"));\n text-decoration: get(\"text-decoration\");\n }\n @include when-active() {\n color: color.get(get(\"color-active\"));\n background-color: color.get(get(\"background-color-active\"));\n border-color: color.get(get(\"border-color-active\"));\n }\n",
56632
+ "code": "\n $font-size: get(\"font-size\");\n @if ($with-reset) {\n @include reset();\n }\n appearance: none; // If used with select for example\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: get(\"gap\");\n text-transform: get(\"text-transform\");\n text-shadow: get(\"text-shadow\");\n vertical-align: middle;\n font-family: get(\"font-family\");\n font-weight: get(\"font-weight\");\n @if ($font-size) {\n @include typography.size($font-size, null, true);\n }\n border-radius: get(\"border-radius\");\n // Removed not sure why it was needed, effects buttons with \n // borders (rendering between bg and border)\n // background-clip: padding-box; \n padding: get(\"padding\");\n line-height: get(\"line-height\");\n letter-spacing: get(\"letter-spacing\");\n box-shadow: get(\"box-shadow\");\n margin: get(\"margin\");\n min-width: get(\"min-width\");\n white-space: get(\"white-space\");\n max-width: 100%; // Questionable, not sure if it's needed\n flex-shrink: 0; \n // Should override link visited coloring\n \n @if get(\"transition-enabled\") {\n transition-duration: get(\"transition-duration\");\n transition-property: get(\"transition-properties\");\n }\n &,\n &:visited {\n color: color.get(get(\"color\"));\n border: get(\"border-width\") solid color.get(get(\"border-color\"));\n background-color: color.get(get(\"background-color\"));\n text-decoration: get(\"text-decoration\");\n }\n &:last-child {\n margin-right: 0;\n }\n &:hover,\n &:focus {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n border-color: color.get(get(\"border-color-hover\"));\n text-decoration: get(\"text-decoration\");\n }\n @include when-active() {\n color: color.get(get(\"color-active\"));\n background-color: color.get(get(\"background-color-active\"));\n border-color: color.get(get(\"border-color-active\"));\n }\n",
56636
56633
  "line": {
56637
56634
  "start": 196,
56638
- "end": 253
56635
+ "end": 255
56639
56636
  }
56640
56637
  }
56641
56638
  },
@@ -56644,10 +56641,10 @@
56644
56641
  "context": {
56645
56642
  "type": "mixin",
56646
56643
  "name": "default",
56647
- "code": "\n $font-size: get(\"font-size\");\n @if ($with-reset) {\n @include reset();\n }\n appearance: none; // If used with select for example\n display: inline-block;\n text-transform: get(\"text-transform\");\n text-align: center;\n text-shadow: get(\"text-shadow\");\n vertical-align: middle;\n font-family: get(\"font-family\");\n font-weight: get(\"font-weight\");\n @if ($font-size) {\n @include typography.size($font-size, null, true);\n }\n border-radius: get(\"border-radius\");\n // Removed not sure why it was needed, effects buttons with \n // borders (rendering between bg and border)\n // background-clip: padding-box; \n padding: get(\"padding\");\n line-height: get(\"line-height\");\n letter-spacing: get(\"letter-spacing\");\n box-shadow: get(\"box-shadow\");\n margin: get(\"margin\");\n min-width: get(\"min-width\");\n white-space: get(\"white-space\");\n max-width: 100%; // Questionable, not sure if it's needed\n flex-shrink: 0; \n // Should override link visited coloring\n \n @if get(\"transition-enabled\") {\n transition-duration: get(\"transition-duration\");\n transition-property: get(\"transition-properties\");\n }\n &,\n &:visited {\n color: color.get(get(\"color\"));\n border: get(\"border-width\") solid color.get(get(\"border-color\"));\n background-color: color.get(get(\"background-color\"));\n text-decoration: get(\"text-decoration\");\n }\n &:last-child {\n margin-right: 0;\n }\n &:hover,\n &:focus {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n border-color: color.get(get(\"border-color-hover\"));\n text-decoration: get(\"text-decoration\");\n }\n @include when-active() {\n color: color.get(get(\"color-active\"));\n background-color: color.get(get(\"background-color-active\"));\n border-color: color.get(get(\"border-color-active\"));\n }\n",
56644
+ "code": "\n $font-size: get(\"font-size\");\n @if ($with-reset) {\n @include reset();\n }\n appearance: none; // If used with select for example\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: get(\"gap\");\n text-transform: get(\"text-transform\");\n text-shadow: get(\"text-shadow\");\n vertical-align: middle;\n font-family: get(\"font-family\");\n font-weight: get(\"font-weight\");\n @if ($font-size) {\n @include typography.size($font-size, null, true);\n }\n border-radius: get(\"border-radius\");\n // Removed not sure why it was needed, effects buttons with \n // borders (rendering between bg and border)\n // background-clip: padding-box; \n padding: get(\"padding\");\n line-height: get(\"line-height\");\n letter-spacing: get(\"letter-spacing\");\n box-shadow: get(\"box-shadow\");\n margin: get(\"margin\");\n min-width: get(\"min-width\");\n white-space: get(\"white-space\");\n max-width: 100%; // Questionable, not sure if it's needed\n flex-shrink: 0; \n // Should override link visited coloring\n \n @if get(\"transition-enabled\") {\n transition-duration: get(\"transition-duration\");\n transition-property: get(\"transition-properties\");\n }\n &,\n &:visited {\n color: color.get(get(\"color\"));\n border: get(\"border-width\") solid color.get(get(\"border-color\"));\n background-color: color.get(get(\"background-color\"));\n text-decoration: get(\"text-decoration\");\n }\n &:last-child {\n margin-right: 0;\n }\n &:hover,\n &:focus {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n border-color: color.get(get(\"border-color-hover\"));\n text-decoration: get(\"text-decoration\");\n }\n @include when-active() {\n color: color.get(get(\"color-active\"));\n background-color: color.get(get(\"background-color-active\"));\n border-color: color.get(get(\"border-color-active\"));\n }\n",
56648
56645
  "line": {
56649
56646
  "start": 196,
56650
- "end": 253
56647
+ "end": 255
56651
56648
  }
56652
56649
  }
56653
56650
  },
@@ -56656,10 +56653,10 @@
56656
56653
  "context": {
56657
56654
  "type": "mixin",
56658
56655
  "name": "default",
56659
- "code": "\n $font-size: get(\"font-size\");\n @if ($with-reset) {\n @include reset();\n }\n appearance: none; // If used with select for example\n display: inline-block;\n text-transform: get(\"text-transform\");\n text-align: center;\n text-shadow: get(\"text-shadow\");\n vertical-align: middle;\n font-family: get(\"font-family\");\n font-weight: get(\"font-weight\");\n @if ($font-size) {\n @include typography.size($font-size, null, true);\n }\n border-radius: get(\"border-radius\");\n // Removed not sure why it was needed, effects buttons with \n // borders (rendering between bg and border)\n // background-clip: padding-box; \n padding: get(\"padding\");\n line-height: get(\"line-height\");\n letter-spacing: get(\"letter-spacing\");\n box-shadow: get(\"box-shadow\");\n margin: get(\"margin\");\n min-width: get(\"min-width\");\n white-space: get(\"white-space\");\n max-width: 100%; // Questionable, not sure if it's needed\n flex-shrink: 0; \n // Should override link visited coloring\n \n @if get(\"transition-enabled\") {\n transition-duration: get(\"transition-duration\");\n transition-property: get(\"transition-properties\");\n }\n &,\n &:visited {\n color: color.get(get(\"color\"));\n border: get(\"border-width\") solid color.get(get(\"border-color\"));\n background-color: color.get(get(\"background-color\"));\n text-decoration: get(\"text-decoration\");\n }\n &:last-child {\n margin-right: 0;\n }\n &:hover,\n &:focus {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n border-color: color.get(get(\"border-color-hover\"));\n text-decoration: get(\"text-decoration\");\n }\n @include when-active() {\n color: color.get(get(\"color-active\"));\n background-color: color.get(get(\"background-color-active\"));\n border-color: color.get(get(\"border-color-active\"));\n }\n",
56656
+ "code": "\n $font-size: get(\"font-size\");\n @if ($with-reset) {\n @include reset();\n }\n appearance: none; // If used with select for example\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: get(\"gap\");\n text-transform: get(\"text-transform\");\n text-shadow: get(\"text-shadow\");\n vertical-align: middle;\n font-family: get(\"font-family\");\n font-weight: get(\"font-weight\");\n @if ($font-size) {\n @include typography.size($font-size, null, true);\n }\n border-radius: get(\"border-radius\");\n // Removed not sure why it was needed, effects buttons with \n // borders (rendering between bg and border)\n // background-clip: padding-box; \n padding: get(\"padding\");\n line-height: get(\"line-height\");\n letter-spacing: get(\"letter-spacing\");\n box-shadow: get(\"box-shadow\");\n margin: get(\"margin\");\n min-width: get(\"min-width\");\n white-space: get(\"white-space\");\n max-width: 100%; // Questionable, not sure if it's needed\n flex-shrink: 0; \n // Should override link visited coloring\n \n @if get(\"transition-enabled\") {\n transition-duration: get(\"transition-duration\");\n transition-property: get(\"transition-properties\");\n }\n &,\n &:visited {\n color: color.get(get(\"color\"));\n border: get(\"border-width\") solid color.get(get(\"border-color\"));\n background-color: color.get(get(\"background-color\"));\n text-decoration: get(\"text-decoration\");\n }\n &:last-child {\n margin-right: 0;\n }\n &:hover,\n &:focus {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n border-color: color.get(get(\"border-color-hover\"));\n text-decoration: get(\"text-decoration\");\n }\n @include when-active() {\n color: color.get(get(\"color-active\"));\n background-color: color.get(get(\"background-color-active\"));\n border-color: color.get(get(\"border-color-active\"));\n }\n",
56660
56657
  "line": {
56661
56658
  "start": 196,
56662
- "end": 253
56659
+ "end": 255
56663
56660
  }
56664
56661
  }
56665
56662
  },
@@ -56668,10 +56665,10 @@
56668
56665
  "context": {
56669
56666
  "type": "mixin",
56670
56667
  "name": "default",
56671
- "code": "\n $font-size: get(\"font-size\");\n @if ($with-reset) {\n @include reset();\n }\n appearance: none; // If used with select for example\n display: inline-block;\n text-transform: get(\"text-transform\");\n text-align: center;\n text-shadow: get(\"text-shadow\");\n vertical-align: middle;\n font-family: get(\"font-family\");\n font-weight: get(\"font-weight\");\n @if ($font-size) {\n @include typography.size($font-size, null, true);\n }\n border-radius: get(\"border-radius\");\n // Removed not sure why it was needed, effects buttons with \n // borders (rendering between bg and border)\n // background-clip: padding-box; \n padding: get(\"padding\");\n line-height: get(\"line-height\");\n letter-spacing: get(\"letter-spacing\");\n box-shadow: get(\"box-shadow\");\n margin: get(\"margin\");\n min-width: get(\"min-width\");\n white-space: get(\"white-space\");\n max-width: 100%; // Questionable, not sure if it's needed\n flex-shrink: 0; \n // Should override link visited coloring\n \n @if get(\"transition-enabled\") {\n transition-duration: get(\"transition-duration\");\n transition-property: get(\"transition-properties\");\n }\n &,\n &:visited {\n color: color.get(get(\"color\"));\n border: get(\"border-width\") solid color.get(get(\"border-color\"));\n background-color: color.get(get(\"background-color\"));\n text-decoration: get(\"text-decoration\");\n }\n &:last-child {\n margin-right: 0;\n }\n &:hover,\n &:focus {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n border-color: color.get(get(\"border-color-hover\"));\n text-decoration: get(\"text-decoration\");\n }\n @include when-active() {\n color: color.get(get(\"color-active\"));\n background-color: color.get(get(\"background-color-active\"));\n border-color: color.get(get(\"border-color-active\"));\n }\n",
56668
+ "code": "\n $font-size: get(\"font-size\");\n @if ($with-reset) {\n @include reset();\n }\n appearance: none; // If used with select for example\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: get(\"gap\");\n text-transform: get(\"text-transform\");\n text-shadow: get(\"text-shadow\");\n vertical-align: middle;\n font-family: get(\"font-family\");\n font-weight: get(\"font-weight\");\n @if ($font-size) {\n @include typography.size($font-size, null, true);\n }\n border-radius: get(\"border-radius\");\n // Removed not sure why it was needed, effects buttons with \n // borders (rendering between bg and border)\n // background-clip: padding-box; \n padding: get(\"padding\");\n line-height: get(\"line-height\");\n letter-spacing: get(\"letter-spacing\");\n box-shadow: get(\"box-shadow\");\n margin: get(\"margin\");\n min-width: get(\"min-width\");\n white-space: get(\"white-space\");\n max-width: 100%; // Questionable, not sure if it's needed\n flex-shrink: 0; \n // Should override link visited coloring\n \n @if get(\"transition-enabled\") {\n transition-duration: get(\"transition-duration\");\n transition-property: get(\"transition-properties\");\n }\n &,\n &:visited {\n color: color.get(get(\"color\"));\n border: get(\"border-width\") solid color.get(get(\"border-color\"));\n background-color: color.get(get(\"background-color\"));\n text-decoration: get(\"text-decoration\");\n }\n &:last-child {\n margin-right: 0;\n }\n &:hover,\n &:focus {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n border-color: color.get(get(\"border-color-hover\"));\n text-decoration: get(\"text-decoration\");\n }\n @include when-active() {\n color: color.get(get(\"color-active\"));\n background-color: color.get(get(\"background-color-active\"));\n border-color: color.get(get(\"border-color-active\"));\n }\n",
56672
56669
  "line": {
56673
56670
  "start": 196,
56674
- "end": 253
56671
+ "end": 255
56675
56672
  }
56676
56673
  }
56677
56674
  },
@@ -56680,10 +56677,10 @@
56680
56677
  "context": {
56681
56678
  "type": "mixin",
56682
56679
  "name": "default",
56683
- "code": "\n $font-size: get(\"font-size\");\n @if ($with-reset) {\n @include reset();\n }\n appearance: none; // If used with select for example\n display: inline-block;\n text-transform: get(\"text-transform\");\n text-align: center;\n text-shadow: get(\"text-shadow\");\n vertical-align: middle;\n font-family: get(\"font-family\");\n font-weight: get(\"font-weight\");\n @if ($font-size) {\n @include typography.size($font-size, null, true);\n }\n border-radius: get(\"border-radius\");\n // Removed not sure why it was needed, effects buttons with \n // borders (rendering between bg and border)\n // background-clip: padding-box; \n padding: get(\"padding\");\n line-height: get(\"line-height\");\n letter-spacing: get(\"letter-spacing\");\n box-shadow: get(\"box-shadow\");\n margin: get(\"margin\");\n min-width: get(\"min-width\");\n white-space: get(\"white-space\");\n max-width: 100%; // Questionable, not sure if it's needed\n flex-shrink: 0; \n // Should override link visited coloring\n \n @if get(\"transition-enabled\") {\n transition-duration: get(\"transition-duration\");\n transition-property: get(\"transition-properties\");\n }\n &,\n &:visited {\n color: color.get(get(\"color\"));\n border: get(\"border-width\") solid color.get(get(\"border-color\"));\n background-color: color.get(get(\"background-color\"));\n text-decoration: get(\"text-decoration\");\n }\n &:last-child {\n margin-right: 0;\n }\n &:hover,\n &:focus {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n border-color: color.get(get(\"border-color-hover\"));\n text-decoration: get(\"text-decoration\");\n }\n @include when-active() {\n color: color.get(get(\"color-active\"));\n background-color: color.get(get(\"background-color-active\"));\n border-color: color.get(get(\"border-color-active\"));\n }\n",
56680
+ "code": "\n $font-size: get(\"font-size\");\n @if ($with-reset) {\n @include reset();\n }\n appearance: none; // If used with select for example\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: get(\"gap\");\n text-transform: get(\"text-transform\");\n text-shadow: get(\"text-shadow\");\n vertical-align: middle;\n font-family: get(\"font-family\");\n font-weight: get(\"font-weight\");\n @if ($font-size) {\n @include typography.size($font-size, null, true);\n }\n border-radius: get(\"border-radius\");\n // Removed not sure why it was needed, effects buttons with \n // borders (rendering between bg and border)\n // background-clip: padding-box; \n padding: get(\"padding\");\n line-height: get(\"line-height\");\n letter-spacing: get(\"letter-spacing\");\n box-shadow: get(\"box-shadow\");\n margin: get(\"margin\");\n min-width: get(\"min-width\");\n white-space: get(\"white-space\");\n max-width: 100%; // Questionable, not sure if it's needed\n flex-shrink: 0; \n // Should override link visited coloring\n \n @if get(\"transition-enabled\") {\n transition-duration: get(\"transition-duration\");\n transition-property: get(\"transition-properties\");\n }\n &,\n &:visited {\n color: color.get(get(\"color\"));\n border: get(\"border-width\") solid color.get(get(\"border-color\"));\n background-color: color.get(get(\"background-color\"));\n text-decoration: get(\"text-decoration\");\n }\n &:last-child {\n margin-right: 0;\n }\n &:hover,\n &:focus {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n border-color: color.get(get(\"border-color-hover\"));\n text-decoration: get(\"text-decoration\");\n }\n @include when-active() {\n color: color.get(get(\"color-active\"));\n background-color: color.get(get(\"background-color-active\"));\n border-color: color.get(get(\"border-color-active\"));\n }\n",
56684
56681
  "line": {
56685
56682
  "start": 196,
56686
- "end": 253
56683
+ "end": 255
56687
56684
  }
56688
56685
  }
56689
56686
  },
@@ -56692,10 +56689,10 @@
56692
56689
  "context": {
56693
56690
  "type": "mixin",
56694
56691
  "name": "default",
56695
- "code": "\n $font-size: get(\"font-size\");\n @if ($with-reset) {\n @include reset();\n }\n appearance: none; // If used with select for example\n display: inline-block;\n text-transform: get(\"text-transform\");\n text-align: center;\n text-shadow: get(\"text-shadow\");\n vertical-align: middle;\n font-family: get(\"font-family\");\n font-weight: get(\"font-weight\");\n @if ($font-size) {\n @include typography.size($font-size, null, true);\n }\n border-radius: get(\"border-radius\");\n // Removed not sure why it was needed, effects buttons with \n // borders (rendering between bg and border)\n // background-clip: padding-box; \n padding: get(\"padding\");\n line-height: get(\"line-height\");\n letter-spacing: get(\"letter-spacing\");\n box-shadow: get(\"box-shadow\");\n margin: get(\"margin\");\n min-width: get(\"min-width\");\n white-space: get(\"white-space\");\n max-width: 100%; // Questionable, not sure if it's needed\n flex-shrink: 0; \n // Should override link visited coloring\n \n @if get(\"transition-enabled\") {\n transition-duration: get(\"transition-duration\");\n transition-property: get(\"transition-properties\");\n }\n &,\n &:visited {\n color: color.get(get(\"color\"));\n border: get(\"border-width\") solid color.get(get(\"border-color\"));\n background-color: color.get(get(\"background-color\"));\n text-decoration: get(\"text-decoration\");\n }\n &:last-child {\n margin-right: 0;\n }\n &:hover,\n &:focus {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n border-color: color.get(get(\"border-color-hover\"));\n text-decoration: get(\"text-decoration\");\n }\n @include when-active() {\n color: color.get(get(\"color-active\"));\n background-color: color.get(get(\"background-color-active\"));\n border-color: color.get(get(\"border-color-active\"));\n }\n",
56692
+ "code": "\n $font-size: get(\"font-size\");\n @if ($with-reset) {\n @include reset();\n }\n appearance: none; // If used with select for example\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: get(\"gap\");\n text-transform: get(\"text-transform\");\n text-shadow: get(\"text-shadow\");\n vertical-align: middle;\n font-family: get(\"font-family\");\n font-weight: get(\"font-weight\");\n @if ($font-size) {\n @include typography.size($font-size, null, true);\n }\n border-radius: get(\"border-radius\");\n // Removed not sure why it was needed, effects buttons with \n // borders (rendering between bg and border)\n // background-clip: padding-box; \n padding: get(\"padding\");\n line-height: get(\"line-height\");\n letter-spacing: get(\"letter-spacing\");\n box-shadow: get(\"box-shadow\");\n margin: get(\"margin\");\n min-width: get(\"min-width\");\n white-space: get(\"white-space\");\n max-width: 100%; // Questionable, not sure if it's needed\n flex-shrink: 0; \n // Should override link visited coloring\n \n @if get(\"transition-enabled\") {\n transition-duration: get(\"transition-duration\");\n transition-property: get(\"transition-properties\");\n }\n &,\n &:visited {\n color: color.get(get(\"color\"));\n border: get(\"border-width\") solid color.get(get(\"border-color\"));\n background-color: color.get(get(\"background-color\"));\n text-decoration: get(\"text-decoration\");\n }\n &:last-child {\n margin-right: 0;\n }\n &:hover,\n &:focus {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n border-color: color.get(get(\"border-color-hover\"));\n text-decoration: get(\"text-decoration\");\n }\n @include when-active() {\n color: color.get(get(\"color-active\"));\n background-color: color.get(get(\"background-color-active\"));\n border-color: color.get(get(\"border-color-active\"));\n }\n",
56696
56693
  "line": {
56697
56694
  "start": 196,
56698
- "end": 253
56695
+ "end": 255
56699
56696
  }
56700
56697
  }
56701
56698
  },
@@ -56704,10 +56701,10 @@
56704
56701
  "context": {
56705
56702
  "type": "mixin",
56706
56703
  "name": "default",
56707
- "code": "\n $font-size: get(\"font-size\");\n @if ($with-reset) {\n @include reset();\n }\n appearance: none; // If used with select for example\n display: inline-block;\n text-transform: get(\"text-transform\");\n text-align: center;\n text-shadow: get(\"text-shadow\");\n vertical-align: middle;\n font-family: get(\"font-family\");\n font-weight: get(\"font-weight\");\n @if ($font-size) {\n @include typography.size($font-size, null, true);\n }\n border-radius: get(\"border-radius\");\n // Removed not sure why it was needed, effects buttons with \n // borders (rendering between bg and border)\n // background-clip: padding-box; \n padding: get(\"padding\");\n line-height: get(\"line-height\");\n letter-spacing: get(\"letter-spacing\");\n box-shadow: get(\"box-shadow\");\n margin: get(\"margin\");\n min-width: get(\"min-width\");\n white-space: get(\"white-space\");\n max-width: 100%; // Questionable, not sure if it's needed\n flex-shrink: 0; \n // Should override link visited coloring\n \n @if get(\"transition-enabled\") {\n transition-duration: get(\"transition-duration\");\n transition-property: get(\"transition-properties\");\n }\n &,\n &:visited {\n color: color.get(get(\"color\"));\n border: get(\"border-width\") solid color.get(get(\"border-color\"));\n background-color: color.get(get(\"background-color\"));\n text-decoration: get(\"text-decoration\");\n }\n &:last-child {\n margin-right: 0;\n }\n &:hover,\n &:focus {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n border-color: color.get(get(\"border-color-hover\"));\n text-decoration: get(\"text-decoration\");\n }\n @include when-active() {\n color: color.get(get(\"color-active\"));\n background-color: color.get(get(\"background-color-active\"));\n border-color: color.get(get(\"border-color-active\"));\n }\n",
56704
+ "code": "\n $font-size: get(\"font-size\");\n @if ($with-reset) {\n @include reset();\n }\n appearance: none; // If used with select for example\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: get(\"gap\");\n text-transform: get(\"text-transform\");\n text-shadow: get(\"text-shadow\");\n vertical-align: middle;\n font-family: get(\"font-family\");\n font-weight: get(\"font-weight\");\n @if ($font-size) {\n @include typography.size($font-size, null, true);\n }\n border-radius: get(\"border-radius\");\n // Removed not sure why it was needed, effects buttons with \n // borders (rendering between bg and border)\n // background-clip: padding-box; \n padding: get(\"padding\");\n line-height: get(\"line-height\");\n letter-spacing: get(\"letter-spacing\");\n box-shadow: get(\"box-shadow\");\n margin: get(\"margin\");\n min-width: get(\"min-width\");\n white-space: get(\"white-space\");\n max-width: 100%; // Questionable, not sure if it's needed\n flex-shrink: 0; \n // Should override link visited coloring\n \n @if get(\"transition-enabled\") {\n transition-duration: get(\"transition-duration\");\n transition-property: get(\"transition-properties\");\n }\n &,\n &:visited {\n color: color.get(get(\"color\"));\n border: get(\"border-width\") solid color.get(get(\"border-color\"));\n background-color: color.get(get(\"background-color\"));\n text-decoration: get(\"text-decoration\");\n }\n &:last-child {\n margin-right: 0;\n }\n &:hover,\n &:focus {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n border-color: color.get(get(\"border-color-hover\"));\n text-decoration: get(\"text-decoration\");\n }\n @include when-active() {\n color: color.get(get(\"color-active\"));\n background-color: color.get(get(\"background-color-active\"));\n border-color: color.get(get(\"border-color-active\"));\n }\n",
56708
56705
  "line": {
56709
56706
  "start": 196,
56710
- "end": 253
56707
+ "end": 255
56711
56708
  }
56712
56709
  }
56713
56710
  },
@@ -56716,10 +56713,10 @@
56716
56713
  "context": {
56717
56714
  "type": "mixin",
56718
56715
  "name": "default",
56719
- "code": "\n $font-size: get(\"font-size\");\n @if ($with-reset) {\n @include reset();\n }\n appearance: none; // If used with select for example\n display: inline-block;\n text-transform: get(\"text-transform\");\n text-align: center;\n text-shadow: get(\"text-shadow\");\n vertical-align: middle;\n font-family: get(\"font-family\");\n font-weight: get(\"font-weight\");\n @if ($font-size) {\n @include typography.size($font-size, null, true);\n }\n border-radius: get(\"border-radius\");\n // Removed not sure why it was needed, effects buttons with \n // borders (rendering between bg and border)\n // background-clip: padding-box; \n padding: get(\"padding\");\n line-height: get(\"line-height\");\n letter-spacing: get(\"letter-spacing\");\n box-shadow: get(\"box-shadow\");\n margin: get(\"margin\");\n min-width: get(\"min-width\");\n white-space: get(\"white-space\");\n max-width: 100%; // Questionable, not sure if it's needed\n flex-shrink: 0; \n // Should override link visited coloring\n \n @if get(\"transition-enabled\") {\n transition-duration: get(\"transition-duration\");\n transition-property: get(\"transition-properties\");\n }\n &,\n &:visited {\n color: color.get(get(\"color\"));\n border: get(\"border-width\") solid color.get(get(\"border-color\"));\n background-color: color.get(get(\"background-color\"));\n text-decoration: get(\"text-decoration\");\n }\n &:last-child {\n margin-right: 0;\n }\n &:hover,\n &:focus {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n border-color: color.get(get(\"border-color-hover\"));\n text-decoration: get(\"text-decoration\");\n }\n @include when-active() {\n color: color.get(get(\"color-active\"));\n background-color: color.get(get(\"background-color-active\"));\n border-color: color.get(get(\"border-color-active\"));\n }\n",
56716
+ "code": "\n $font-size: get(\"font-size\");\n @if ($with-reset) {\n @include reset();\n }\n appearance: none; // If used with select for example\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: get(\"gap\");\n text-transform: get(\"text-transform\");\n text-shadow: get(\"text-shadow\");\n vertical-align: middle;\n font-family: get(\"font-family\");\n font-weight: get(\"font-weight\");\n @if ($font-size) {\n @include typography.size($font-size, null, true);\n }\n border-radius: get(\"border-radius\");\n // Removed not sure why it was needed, effects buttons with \n // borders (rendering between bg and border)\n // background-clip: padding-box; \n padding: get(\"padding\");\n line-height: get(\"line-height\");\n letter-spacing: get(\"letter-spacing\");\n box-shadow: get(\"box-shadow\");\n margin: get(\"margin\");\n min-width: get(\"min-width\");\n white-space: get(\"white-space\");\n max-width: 100%; // Questionable, not sure if it's needed\n flex-shrink: 0; \n // Should override link visited coloring\n \n @if get(\"transition-enabled\") {\n transition-duration: get(\"transition-duration\");\n transition-property: get(\"transition-properties\");\n }\n &,\n &:visited {\n color: color.get(get(\"color\"));\n border: get(\"border-width\") solid color.get(get(\"border-color\"));\n background-color: color.get(get(\"background-color\"));\n text-decoration: get(\"text-decoration\");\n }\n &:last-child {\n margin-right: 0;\n }\n &:hover,\n &:focus {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n border-color: color.get(get(\"border-color-hover\"));\n text-decoration: get(\"text-decoration\");\n }\n @include when-active() {\n color: color.get(get(\"color-active\"));\n background-color: color.get(get(\"background-color-active\"));\n border-color: color.get(get(\"border-color-active\"));\n }\n",
56720
56717
  "line": {
56721
56718
  "start": 196,
56722
- "end": 253
56719
+ "end": 255
56723
56720
  }
56724
56721
  }
56725
56722
  },
@@ -56728,10 +56725,10 @@
56728
56725
  "context": {
56729
56726
  "type": "mixin",
56730
56727
  "name": "default",
56731
- "code": "\n $font-size: get(\"font-size\");\n @if ($with-reset) {\n @include reset();\n }\n appearance: none; // If used with select for example\n display: inline-block;\n text-transform: get(\"text-transform\");\n text-align: center;\n text-shadow: get(\"text-shadow\");\n vertical-align: middle;\n font-family: get(\"font-family\");\n font-weight: get(\"font-weight\");\n @if ($font-size) {\n @include typography.size($font-size, null, true);\n }\n border-radius: get(\"border-radius\");\n // Removed not sure why it was needed, effects buttons with \n // borders (rendering between bg and border)\n // background-clip: padding-box; \n padding: get(\"padding\");\n line-height: get(\"line-height\");\n letter-spacing: get(\"letter-spacing\");\n box-shadow: get(\"box-shadow\");\n margin: get(\"margin\");\n min-width: get(\"min-width\");\n white-space: get(\"white-space\");\n max-width: 100%; // Questionable, not sure if it's needed\n flex-shrink: 0; \n // Should override link visited coloring\n \n @if get(\"transition-enabled\") {\n transition-duration: get(\"transition-duration\");\n transition-property: get(\"transition-properties\");\n }\n &,\n &:visited {\n color: color.get(get(\"color\"));\n border: get(\"border-width\") solid color.get(get(\"border-color\"));\n background-color: color.get(get(\"background-color\"));\n text-decoration: get(\"text-decoration\");\n }\n &:last-child {\n margin-right: 0;\n }\n &:hover,\n &:focus {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n border-color: color.get(get(\"border-color-hover\"));\n text-decoration: get(\"text-decoration\");\n }\n @include when-active() {\n color: color.get(get(\"color-active\"));\n background-color: color.get(get(\"background-color-active\"));\n border-color: color.get(get(\"border-color-active\"));\n }\n",
56728
+ "code": "\n $font-size: get(\"font-size\");\n @if ($with-reset) {\n @include reset();\n }\n appearance: none; // If used with select for example\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: get(\"gap\");\n text-transform: get(\"text-transform\");\n text-shadow: get(\"text-shadow\");\n vertical-align: middle;\n font-family: get(\"font-family\");\n font-weight: get(\"font-weight\");\n @if ($font-size) {\n @include typography.size($font-size, null, true);\n }\n border-radius: get(\"border-radius\");\n // Removed not sure why it was needed, effects buttons with \n // borders (rendering between bg and border)\n // background-clip: padding-box; \n padding: get(\"padding\");\n line-height: get(\"line-height\");\n letter-spacing: get(\"letter-spacing\");\n box-shadow: get(\"box-shadow\");\n margin: get(\"margin\");\n min-width: get(\"min-width\");\n white-space: get(\"white-space\");\n max-width: 100%; // Questionable, not sure if it's needed\n flex-shrink: 0; \n // Should override link visited coloring\n \n @if get(\"transition-enabled\") {\n transition-duration: get(\"transition-duration\");\n transition-property: get(\"transition-properties\");\n }\n &,\n &:visited {\n color: color.get(get(\"color\"));\n border: get(\"border-width\") solid color.get(get(\"border-color\"));\n background-color: color.get(get(\"background-color\"));\n text-decoration: get(\"text-decoration\");\n }\n &:last-child {\n margin-right: 0;\n }\n &:hover,\n &:focus {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n border-color: color.get(get(\"border-color-hover\"));\n text-decoration: get(\"text-decoration\");\n }\n @include when-active() {\n color: color.get(get(\"color-active\"));\n background-color: color.get(get(\"background-color-active\"));\n border-color: color.get(get(\"border-color-active\"));\n }\n",
56732
56729
  "line": {
56733
56730
  "start": 196,
56734
- "end": 253
56731
+ "end": 255
56735
56732
  }
56736
56733
  }
56737
56734
  },
@@ -56742,8 +56739,8 @@
56742
56739
  "name": "when-active",
56743
56740
  "code": "\n #{ get(\"active-selector\") } {\n @content;\n }\n",
56744
56741
  "line": {
56745
- "start": 265,
56746
- "end": 269
56742
+ "start": 267,
56743
+ "end": 271
56747
56744
  }
56748
56745
  }
56749
56746
  },
@@ -56754,8 +56751,8 @@
56754
56751
  "name": "size",
56755
56752
  "code": "\n $size: utils.require-map-get($sizes, $name, 'button [size]');\n $font-size: map.get($size, \"font-size\");\n padding: map.get($size, \"padding\");\n border-radius: map.get($size, \"border-radius\");\n border-width: map.get($size, \"border-width\");\n min-width: map.get($size, \"min-width\");\n @if $font-size {\n @include typography.size($font-size);\n }\n",
56756
56753
  "line": {
56757
- "start": 276,
56758
- "end": 286
56754
+ "start": 278,
56755
+ "end": 288
56759
56756
  }
56760
56757
  }
56761
56758
  },
@@ -56766,8 +56763,8 @@
56766
56763
  "name": "size",
56767
56764
  "code": "\n $size: utils.require-map-get($sizes, $name, 'button [size]');\n $font-size: map.get($size, \"font-size\");\n padding: map.get($size, \"padding\");\n border-radius: map.get($size, \"border-radius\");\n border-width: map.get($size, \"border-width\");\n min-width: map.get($size, \"min-width\");\n @if $font-size {\n @include typography.size($font-size);\n }\n",
56768
56765
  "line": {
56769
- "start": 276,
56770
- "end": 286
56766
+ "start": 278,
56767
+ "end": 288
56771
56768
  }
56772
56769
  }
56773
56770
  },
@@ -56778,8 +56775,8 @@
56778
56775
  "name": "size",
56779
56776
  "code": "\n $size: utils.require-map-get($sizes, $name, 'button [size]');\n $font-size: map.get($size, \"font-size\");\n padding: map.get($size, \"padding\");\n border-radius: map.get($size, \"border-radius\");\n border-width: map.get($size, \"border-width\");\n min-width: map.get($size, \"min-width\");\n @if $font-size {\n @include typography.size($font-size);\n }\n",
56780
56777
  "line": {
56781
- "start": 276,
56782
- "end": 286
56778
+ "start": 278,
56779
+ "end": 288
56783
56780
  }
56784
56781
  }
56785
56782
  },
@@ -56790,8 +56787,8 @@
56790
56787
  "name": "size",
56791
56788
  "code": "\n $size: utils.require-map-get($sizes, $name, 'button [size]');\n $font-size: map.get($size, \"font-size\");\n padding: map.get($size, \"padding\");\n border-radius: map.get($size, \"border-radius\");\n border-width: map.get($size, \"border-width\");\n min-width: map.get($size, \"min-width\");\n @if $font-size {\n @include typography.size($font-size);\n }\n",
56792
56789
  "line": {
56793
- "start": 276,
56794
- "end": 286
56790
+ "start": 278,
56791
+ "end": 288
56795
56792
  }
56796
56793
  }
56797
56794
  },
@@ -56802,8 +56799,8 @@
56802
56799
  "name": "size",
56803
56800
  "code": "\n $size: utils.require-map-get($sizes, $name, 'button [size]');\n $font-size: map.get($size, \"font-size\");\n padding: map.get($size, \"padding\");\n border-radius: map.get($size, \"border-radius\");\n border-width: map.get($size, \"border-width\");\n min-width: map.get($size, \"min-width\");\n @if $font-size {\n @include typography.size($font-size);\n }\n",
56804
56801
  "line": {
56805
- "start": 276,
56806
- "end": 286
56802
+ "start": 278,
56803
+ "end": 288
56807
56804
  }
56808
56805
  }
56809
56806
  },
@@ -56814,8 +56811,8 @@
56814
56811
  "name": "get-style-value",
56815
56812
  "code": "\n $style: utils.require-map-get($styles, $name, 'button [color value]');\n $state-style: ();\n // If a specific state [hover, active] grab that map\n @if ($state) {\n $state-style: map.get($style, $state);\n $state-style: utils.when($state-style, $state-style, ());\n }\n // From is the map to grab styles from\n $from: utils.when($state, $state-style, $style);\n $value: map.get($from, $prop);\n\n // Fallback to parent (if hover)\n @if ($state == \"hover\") {\n $value: utils.when($value, $value, map.get($style, $prop)); \n }\n\n @if (meta.type-of($value) == \"string\" and string.index($prop, \"color\")) {\n @return color.get($value);\n } @else {\n @return $value;\n }\n",
56816
56813
  "line": {
56817
- "start": 294,
56818
- "end": 316
56814
+ "start": 296,
56815
+ "end": 318
56819
56816
  }
56820
56817
  }
56821
56818
  },
@@ -56826,8 +56823,8 @@
56826
56823
  "name": "get-style-value",
56827
56824
  "code": "\n $style: utils.require-map-get($styles, $name, 'button [color value]');\n $state-style: ();\n // If a specific state [hover, active] grab that map\n @if ($state) {\n $state-style: map.get($style, $state);\n $state-style: utils.when($state-style, $state-style, ());\n }\n // From is the map to grab styles from\n $from: utils.when($state, $state-style, $style);\n $value: map.get($from, $prop);\n\n // Fallback to parent (if hover)\n @if ($state == \"hover\") {\n $value: utils.when($value, $value, map.get($style, $prop)); \n }\n\n @if (meta.type-of($value) == \"string\" and string.index($prop, \"color\")) {\n @return color.get($value);\n } @else {\n @return $value;\n }\n",
56828
56825
  "line": {
56829
- "start": 294,
56830
- "end": 316
56826
+ "start": 296,
56827
+ "end": 318
56831
56828
  }
56832
56829
  }
56833
56830
  },
@@ -56838,8 +56835,8 @@
56838
56835
  "name": "get-style-value",
56839
56836
  "code": "\n $style: utils.require-map-get($styles, $name, 'button [color value]');\n $state-style: ();\n // If a specific state [hover, active] grab that map\n @if ($state) {\n $state-style: map.get($style, $state);\n $state-style: utils.when($state-style, $state-style, ());\n }\n // From is the map to grab styles from\n $from: utils.when($state, $state-style, $style);\n $value: map.get($from, $prop);\n\n // Fallback to parent (if hover)\n @if ($state == \"hover\") {\n $value: utils.when($value, $value, map.get($style, $prop)); \n }\n\n @if (meta.type-of($value) == \"string\" and string.index($prop, \"color\")) {\n @return color.get($value);\n } @else {\n @return $value;\n }\n",
56840
56837
  "line": {
56841
- "start": 294,
56842
- "end": 316
56838
+ "start": 296,
56839
+ "end": 318
56843
56840
  }
56844
56841
  }
56845
56842
  },
@@ -56850,8 +56847,8 @@
56850
56847
  "name": "get-style-value",
56851
56848
  "code": "\n $style: utils.require-map-get($styles, $name, 'button [color value]');\n $state-style: ();\n // If a specific state [hover, active] grab that map\n @if ($state) {\n $state-style: map.get($style, $state);\n $state-style: utils.when($state-style, $state-style, ());\n }\n // From is the map to grab styles from\n $from: utils.when($state, $state-style, $style);\n $value: map.get($from, $prop);\n\n // Fallback to parent (if hover)\n @if ($state == \"hover\") {\n $value: utils.when($value, $value, map.get($style, $prop)); \n }\n\n @if (meta.type-of($value) == \"string\" and string.index($prop, \"color\")) {\n @return color.get($value);\n } @else {\n @return $value;\n }\n",
56852
56849
  "line": {
56853
- "start": 294,
56854
- "end": 316
56850
+ "start": 296,
56851
+ "end": 318
56855
56852
  }
56856
56853
  }
56857
56854
  },
@@ -58478,8 +58475,8 @@
58478
58475
  "name": "size",
58479
58476
  "code": "\n $size: utils.require-map-get($sizes, $name, 'button [size]');\n $font-size: map.get($size, \"font-size\");\n padding: map.get($size, \"padding\");\n border-radius: map.get($size, \"border-radius\");\n border-width: map.get($size, \"border-width\");\n min-width: map.get($size, \"min-width\");\n @if $font-size {\n @include typography.size($font-size);\n }\n",
58480
58477
  "line": {
58481
- "start": 276,
58482
- "end": 286
58478
+ "start": 278,
58479
+ "end": 288
58483
58480
  }
58484
58481
  }
58485
58482
  },
@@ -62728,8 +62725,8 @@
62728
62725
  "name": "size",
62729
62726
  "code": "\n $size: utils.require-map-get($sizes, $name, 'button [size]');\n $font-size: map.get($size, \"font-size\");\n padding: map.get($size, \"padding\");\n border-radius: map.get($size, \"border-radius\");\n border-width: map.get($size, \"border-width\");\n min-width: map.get($size, \"min-width\");\n @if $font-size {\n @include typography.size($font-size);\n }\n",
62730
62727
  "line": {
62731
- "start": 276,
62732
- "end": 286
62728
+ "start": 278,
62729
+ "end": 288
62733
62730
  }
62734
62731
  }
62735
62732
  },
@@ -62740,8 +62737,8 @@
62740
62737
  "name": "get-style-value",
62741
62738
  "code": "\n $style: utils.require-map-get($styles, $name, 'button [color value]');\n $state-style: ();\n // If a specific state [hover, active] grab that map\n @if ($state) {\n $state-style: map.get($style, $state);\n $state-style: utils.when($state-style, $state-style, ());\n }\n // From is the map to grab styles from\n $from: utils.when($state, $state-style, $style);\n $value: map.get($from, $prop);\n\n // Fallback to parent (if hover)\n @if ($state == \"hover\") {\n $value: utils.when($value, $value, map.get($style, $prop)); \n }\n\n @if (meta.type-of($value) == \"string\" and string.index($prop, \"color\")) {\n @return color.get($value);\n } @else {\n @return $value;\n }\n",
62742
62739
  "line": {
62743
- "start": 294,
62744
- "end": 316
62740
+ "start": 296,
62741
+ "end": 318
62745
62742
  }
62746
62743
  }
62747
62744
  },
@@ -63262,8 +63259,8 @@
63262
63259
  "name": "get-style-value",
63263
63260
  "code": "\n $style: utils.require-map-get($styles, $name, 'button [color value]');\n $state-style: ();\n // If a specific state [hover, active] grab that map\n @if ($state) {\n $state-style: map.get($style, $state);\n $state-style: utils.when($state-style, $state-style, ());\n }\n // From is the map to grab styles from\n $from: utils.when($state, $state-style, $style);\n $value: map.get($from, $prop);\n\n // Fallback to parent (if hover)\n @if ($state == \"hover\") {\n $value: utils.when($value, $value, map.get($style, $prop)); \n }\n\n @if (meta.type-of($value) == \"string\" and string.index($prop, \"color\")) {\n @return color.get($value);\n } @else {\n @return $value;\n }\n",
63264
63261
  "line": {
63265
- "start": 294,
63266
- "end": 316
63262
+ "start": 296,
63263
+ "end": 318
63267
63264
  }
63268
63265
  }
63269
63266
  },
@@ -63274,8 +63271,8 @@
63274
63271
  "name": "get-style-value",
63275
63272
  "code": "\n $style: utils.require-map-get($styles, $name, 'button [color value]');\n $state-style: ();\n // If a specific state [hover, active] grab that map\n @if ($state) {\n $state-style: map.get($style, $state);\n $state-style: utils.when($state-style, $state-style, ());\n }\n // From is the map to grab styles from\n $from: utils.when($state, $state-style, $style);\n $value: map.get($from, $prop);\n\n // Fallback to parent (if hover)\n @if ($state == \"hover\") {\n $value: utils.when($value, $value, map.get($style, $prop)); \n }\n\n @if (meta.type-of($value) == \"string\" and string.index($prop, \"color\")) {\n @return color.get($value);\n } @else {\n @return $value;\n }\n",
63276
63273
  "line": {
63277
- "start": 294,
63278
- "end": 316
63274
+ "start": 296,
63275
+ "end": 318
63279
63276
  }
63280
63277
  }
63281
63278
  },
@@ -63286,8 +63283,8 @@
63286
63283
  "name": "get-style-value",
63287
63284
  "code": "\n $style: utils.require-map-get($styles, $name, 'button [color value]');\n $state-style: ();\n // If a specific state [hover, active] grab that map\n @if ($state) {\n $state-style: map.get($style, $state);\n $state-style: utils.when($state-style, $state-style, ());\n }\n // From is the map to grab styles from\n $from: utils.when($state, $state-style, $style);\n $value: map.get($from, $prop);\n\n // Fallback to parent (if hover)\n @if ($state == \"hover\") {\n $value: utils.when($value, $value, map.get($style, $prop)); \n }\n\n @if (meta.type-of($value) == \"string\" and string.index($prop, \"color\")) {\n @return color.get($value);\n } @else {\n @return $value;\n }\n",
63288
63285
  "line": {
63289
- "start": 294,
63290
- "end": 316
63286
+ "start": 296,
63287
+ "end": 318
63291
63288
  }
63292
63289
  }
63293
63290
  },