fontdue-js 2.19.0 → 2.19.1

package/dist/fontdue.css

@@ -39,11 +39,6 @@
   margin: 0;
   appearance: none;
   text-transform: inherit;
-  padding: 15px 30px;
-  color: var(--button_text_color);
-  background: var(--button_background_color);
-  border: 1px solid var(--button_border_color);
-  font-size: 1rem;
 }
 .buy-button:active, .buy-button:focus {
   outline: none;
@@ -51,6 +46,13 @@
 .buy-button:not(:disabled) {
   cursor: pointer;
 }
+.buy-button {
+  padding: 15px 30px;
+  color: var(--button_text_color);
+  background: var(--button_background_color);
+  border: 1px solid var(--button_border_color);
+  font-size: 1rem;
+}
 .buy-button:hover {
   color: var(--button_hover_text_color);
   background: var(--button_hover_background_color);
@@ -102,7 +104,7 @@
 }
 
 .login-form__errors {
-  color: color(red);
+  color: red;
   margin-top: 30px;
   margin-bottom: 30px;
 }
@@ -135,7 +137,7 @@
   margin-bottom: 30px;
 }
 .test-fonts__errors {
-  color: color(red);
+  color: red;
   margin-top: 30px;
   margin-bottom: 30px;
 }
@@ -154,7 +156,7 @@
   margin: 0;
 }
 .test-fonts__agreement[data-highlighted=true] {
-  color: color(red);
+  color: red;
 }
 .test-fonts__downloading {
   grid-template-columns: 30px 1fr;
@@ -422,7 +424,6 @@ div[data-component=TypeTesters] {
   margin: 0;
   appearance: none;
   text-transform: inherit;
-  white-space: nowrap;
 }
 .type-tester__edit-all:active, .type-tester__edit-all:focus {
   outline: none;
@@ -430,6 +431,9 @@ div[data-component=TypeTesters] {
 .type-tester__edit-all:not(:disabled) {
   cursor: pointer;
 }
+.type-tester__edit-all {
+  white-space: nowrap;
+}
 .type-tester__edit-all:not(:last-child) {
   margin-right: 20px;
 }
@@ -520,15 +524,17 @@ div[data-component=TypeTesters] {
   margin: 0;
   appearance: none;
   text-transform: inherit;
+}
+.type-tester__toolbar__input:active, .type-tester__toolbar__input:focus {
+  outline: none;
+}
+.type-tester__toolbar__input {
   border: 0 !important;
   color: inherit !important;
   background: transparent !important;
   width: 3em;
   text-align: right;
 }
-.type-tester__toolbar__input:active, .type-tester__toolbar__input:focus {
-  outline: none;
-}
 .type-tester__price {
   display: none;
 }
@@ -572,6 +578,14 @@ div[data-component=TypeTesters] {
   margin: 0;
   appearance: none;
   text-transform: inherit;
+}
+.type-tester__slider__handle:active, .type-tester__slider__handle:focus {
+  outline: none;
+}
+.type-tester__slider__handle:not(:disabled) {
+  cursor: pointer;
+}
+.type-tester__slider__handle {
   background-color: var(--primary_background_color);
   border: 1px solid currentcolor;
   border-radius: 50%;
@@ -582,12 +596,6 @@ div[data-component=TypeTesters] {
   outline: none;
   transform: translateX(-50%);
 }
-.type-tester__slider__handle:active, .type-tester__slider__handle:focus {
-  outline: none;
-}
-.type-tester__slider__handle:not(:disabled) {
-  cursor: pointer;
-}
 .type-tester__slider__handle:hover {
   background-color: currentcolor;
 }
@@ -668,9 +676,6 @@ div[data-component=TypeTesters] {
   margin: 0;
   appearance: none;
   text-transform: inherit;
-  display: flex;
-  --checkbox-size: 20px;
-  --checkbox-margin: 10px;
 }
 .type-tester__features__button:active, .type-tester__features__button:focus {
   outline: none;
@@ -678,6 +683,11 @@ div[data-component=TypeTesters] {
 .type-tester__features__button:not(:disabled) {
   cursor: pointer;
 }
+.type-tester__features__button {
+  display: flex;
+  --checkbox-size: 20px;
+  --checkbox-margin: 10px;
+}
 .type-tester__features[data-selection-style=checkbox] .type-tester__features__button {
   margin-bottom: 5px;
 }
@@ -841,10 +851,6 @@ div[data-component=TypeTesters] {
   margin: 0;
   appearance: none;
   text-transform: inherit;
-  padding: 15px 30px;
-  color: var(--button_text_color);
-  background: var(--button_background_color);
-  border: 1px solid var(--button_border_color);
 }
 .submit-button:active, .submit-button:focus {
   outline: none;
@@ -852,6 +858,12 @@ div[data-component=TypeTesters] {
 .submit-button:not(:disabled) {
   cursor: pointer;
 }
+.submit-button {
+  padding: 15px 30px;
+  color: var(--button_text_color);
+  background: var(--button_background_color);
+  border: 1px solid var(--button_border_color);
+}
 .submit-button:hover:not(:disabled) {
   color: var(--button_hover_text_color);
   background: var(--button_hover_background_color);
@@ -1068,11 +1080,6 @@ div[data-component=TypeTesters] {
   margin: 0;
   appearance: none;
   text-transform: inherit;
-  -webkit-appearance: none;
-  vertical-align: top;
-  width: var(--checkbox-size, 40px);
-  height: var(--checkbox-size, 40px);
-  border: 1px solid var(--checkbox-color, currentcolor);
 }
 .checkbox input:active, .checkbox input:focus {
   outline: none;
@@ -1080,6 +1087,13 @@ div[data-component=TypeTesters] {
 .checkbox input:not(:disabled) {
   cursor: pointer;
 }
+.checkbox input {
+  -webkit-appearance: none;
+  vertical-align: top;
+  width: var(--checkbox-size, 40px);
+  height: var(--checkbox-size, 40px);
+  border: 1px solid var(--checkbox-color, currentcolor);
+}
 .checkbox__icon {
   position: absolute;
   top: 0;
@@ -1146,10 +1160,6 @@ body[data-fontdue-store-modal=open] {
   margin: 0;
   appearance: none;
   text-transform: inherit;
-  padding: 15px 30px;
-  color: var(--button_text_color);
-  background: var(--button_background_color);
-  border: 1px solid var(--button_border_color);
 }
 .button:active, .button:focus {
   outline: none;
@@ -1157,6 +1167,12 @@ body[data-fontdue-store-modal=open] {
 .button:not(:disabled) {
   cursor: pointer;
 }
+.button {
+  padding: 15px 30px;
+  color: var(--button_text_color);
+  background: var(--button_background_color);
+  border: 1px solid var(--button_border_color);
+}
 .button:hover {
   color: var(--button_hover_text_color);
   background: var(--button_hover_background_color);
@@ -1206,12 +1222,6 @@ body[data-fontdue-store-modal=open] {
   margin: 0;
   appearance: none;
   text-transform: inherit;
-  width: 100%;
-  padding: 20px;
-  text-align: center;
-  background: var(--checkout_button_background_color);
-  border: 1px solid var(--checkout_button_border_color);
-  color: var(--checkout_button_text_color);
 }
 .store-modal__cart__button:active, .store-modal__cart__button:focus {
   outline: none;
@@ -1219,6 +1229,14 @@ body[data-fontdue-store-modal=open] {
 .store-modal__cart__button:not(:disabled) {
   cursor: pointer;
 }
+.store-modal__cart__button {
+  width: 100%;
+  padding: 20px;
+  text-align: center;
+  background: var(--checkout_button_background_color);
+  border: 1px solid var(--checkout_button_border_color);
+  color: var(--checkout_button_text_color);
+}
 .store-modal__cart__button:hover:not(:disabled) {
   background: var(--checkout_button_hover_background_color);
   border-color: var(--checkout_button_hover_border_color);
@@ -1288,8 +1306,6 @@ body[data-fontdue-store-modal=open] {
   margin: 0;
   appearance: none;
   text-transform: inherit;
-  color: var(--link_color);
-  border-bottom: 1px solid;
 }
 .store-modal__cart__edit-button:active, .store-modal__cart__edit-button:focus {
   outline: none;
@@ -1297,6 +1313,10 @@ body[data-fontdue-store-modal=open] {
 .store-modal__cart__edit-button:not(:disabled) {
   cursor: pointer;
 }
+.store-modal__cart__edit-button {
+  color: var(--link_color);
+  border-bottom: 1px solid;
+}
 .store-modal__cart__edit-button:hover {
   color: var(--link_hover_color);
 }
@@ -1426,7 +1446,6 @@ body[data-fontdue-store-modal=open] {
   margin: 0;
   appearance: none;
   text-transform: inherit;
-  white-space: nowrap;
 }
 .store-modal__container__back-button:active, .store-modal__container__back-button:focus {
   outline: none;
@@ -1434,6 +1453,9 @@ body[data-fontdue-store-modal=open] {
 .store-modal__container__back-button:not(:disabled) {
   cursor: pointer;
 }
+.store-modal__container__back-button {
+  white-space: nowrap;
+}
 
 .store-modal__container__close-button {
   background: none;
@@ -1474,7 +1496,6 @@ body[data-fontdue-store-modal=open] {
   margin: 0;
   appearance: none;
   text-transform: inherit;
-  margin-right: 15px;
 }
 .store-modal__container__cart-button:active, .store-modal__container__cart-button:focus {
   outline: none;
@@ -1482,6 +1503,9 @@ body[data-fontdue-store-modal=open] {
 .store-modal__container__cart-button:not(:disabled) {
   cursor: pointer;
 }
+.store-modal__container__cart-button {
+  margin-right: 15px;
+}
 .store-modal__container__cart-button [data-label="Cart Active Indicator"] {
   fill: var(--cart_indicator_color);
 }
@@ -1502,6 +1526,14 @@ body[data-fontdue-store-modal=open] {
   margin: 0;
   appearance: none;
   text-transform: inherit;
+}
+.store-modal__download__button:active, .store-modal__download__button:focus {
+  outline: none;
+}
+.store-modal__download__button:not(:disabled) {
+  cursor: pointer;
+}
+.store-modal__download__button {
   padding: 20px;
   padding-right: 40px;
   display: inline-block;
@@ -1510,12 +1542,6 @@ body[data-fontdue-store-modal=open] {
   border: 1px solid var(--download_button_border_color);
   color: var(--download_button_text_color);
 }
-.store-modal__download__button:active, .store-modal__download__button:focus {
-  outline: none;
-}
-.store-modal__download__button:not(:disabled) {
-  cursor: pointer;
-}
 .store-modal__download__button:hover {
   background: var(--download_button_hover_background_color);
   border-color: var(--download_button_hover_border_color);
@@ -1565,18 +1591,6 @@ body[data-fontdue-store-modal=open] {
   margin: 0;
   appearance: none;
   text-transform: inherit;
-  flex: 1;
-  --border-color: var(--button_border_color);
-  padding: 15px 20px 20px;
-  background: var(--button_background_color);
-  color: var(--button_text_color);
-  overflow: hidden;
-  box-sizing: border-box;
-  z-index: 0;
-  box-shadow: 0 0 0 1px var(--border-color);
-  padding-bottom: 15px;
-  margin-bottom: 1px;
-  margin-right: 1px;
 }
 .store-modal__family__style-button:active, .store-modal__family__style-button:focus,
 .store-modal__family__family-button:active,
@@ -1590,6 +1604,22 @@ body[data-fontdue-store-modal=open] {
 .store-modal__family__bundle-button:not(:disabled) {
   cursor: pointer;
 }
+.store-modal__family__style-button,
+.store-modal__family__family-button,
+.store-modal__family__bundle-button {
+  flex: 1;
+  --border-color: var(--button_border_color);
+  padding: 15px 20px 20px;
+  background: var(--button_background_color);
+  color: var(--button_text_color);
+  overflow: hidden;
+  box-sizing: border-box;
+  z-index: 0;
+  box-shadow: 0 0 0 1px var(--border-color);
+  padding-bottom: 15px;
+  margin-bottom: 1px;
+  margin-right: 1px;
+}
 .store-modal__family__style-button:disabled,
 .store-modal__family__family-button:disabled,
 .store-modal__family__bundle-button:disabled {
@@ -1681,12 +1711,6 @@ body[data-fontdue-store-modal=open] {
   margin: 0;
   appearance: none;
   text-transform: inherit;
-  width: 100%;
-  border: 1px solid var(--secondary_text_color);
-  padding: 20px;
-  display: flex;
-  align-items: center;
-  margin-bottom: 20px;
 }
 .store-modal__index-item__button:active, .store-modal__index-item__button:focus {
   outline: none;
@@ -1694,6 +1718,14 @@ body[data-fontdue-store-modal=open] {
 .store-modal__index-item__button:not(:disabled) {
   cursor: pointer;
 }
+.store-modal__index-item__button {
+  width: 100%;
+  border: 1px solid var(--secondary_text_color);
+  padding: 20px;
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+}
 
 .store-modal__index-item__text-container {
   display: block;
@@ -1753,6 +1785,14 @@ body[data-fontdue-store-modal=open] {
   margin: 0;
   appearance: none;
   text-transform: inherit;
+}
+.store-modal__license-selection__license-button:active, .store-modal__license-selection__license-button:focus {
+  outline: none;
+}
+.store-modal__license-selection__license-button:not(:disabled) {
+  cursor: pointer;
+}
+.store-modal__license-selection__license-button {
   border: 1px solid var(--button_border_color);
   background: var(--button_background_color);
   color: var(--button_text_color);
@@ -1763,12 +1803,6 @@ body[data-fontdue-store-modal=open] {
   display: flex;
   align-items: stretch;
 }
-.store-modal__license-selection__license-button:active, .store-modal__license-selection__license-button:focus {
-  outline: none;
-}
-.store-modal__license-selection__license-button:not(:disabled) {
-  cursor: pointer;
-}
 .store-modal__license-selection__license-button:hover:not(:disabled) {
   border-color: var(--button_hover_border_color);
   background: var(--button_hover_background_color);
@@ -1934,6 +1968,14 @@ body[data-fontdue-store-modal=open] {
   margin: 0;
   appearance: none;
   text-transform: inherit;
+}
+.store-modal__order-variable-selection__button:active, .store-modal__order-variable-selection__button:focus {
+  outline: none;
+}
+.store-modal__order-variable-selection__button:not(:disabled) {
+  cursor: pointer;
+}
+.store-modal__order-variable-selection__button {
   border: 1px solid var(--button_border_color);
   background: var(--button_background_color);
   color: var(--button_text_color);
@@ -1944,12 +1986,6 @@ body[data-fontdue-store-modal=open] {
   display: flex;
   align-items: stretch;
 }
-.store-modal__order-variable-selection__button:active, .store-modal__order-variable-selection__button:focus {
-  outline: none;
-}
-.store-modal__order-variable-selection__button:not(:disabled) {
-  cursor: pointer;
-}
 .store-modal__order-variable-selection__button:hover:not(:disabled) {
   border-color: var(--button_hover_border_color);
   background: var(--button_hover_background_color);
@@ -2037,8 +2073,6 @@ body[data-fontdue-store-modal=open] {
   margin: 0;
   appearance: none;
   text-transform: inherit;
-  color: var(--link_color);
-  border-bottom: 1px solid var(--link_color);
 }
 .store-modal__order-variable-selection__ghost-remove:active, .store-modal__order-variable-selection__ghost-remove:focus {
   outline: none;
@@ -2046,6 +2080,10 @@ body[data-fontdue-store-modal=open] {
 .store-modal__order-variable-selection__ghost-remove:not(:disabled) {
   cursor: pointer;
 }
+.store-modal__order-variable-selection__ghost-remove {
+  color: var(--link_color);
+  border-bottom: 1px solid var(--link_color);
+}
 .store-modal__order-variable-selection__ghost-remove:hover {
   color: var(--link_hover_color);
   border-bottom-color: var(--link_hover_color);
@@ -2122,7 +2160,6 @@ body[data-fontdue-store-modal=open] {
   margin: 0;
   appearance: none;
   text-transform: inherit;
-  text-decoration: underline;
 }
 .store-modal__product-summary__error-button:active, .store-modal__product-summary__error-button:focus {
   outline: none;
@@ -2130,6 +2167,9 @@ body[data-fontdue-store-modal=open] {
 .store-modal__product-summary__error-button:not(:disabled) {
   cursor: pointer;
 }
+.store-modal__product-summary__error-button {
+  text-decoration: underline;
+}
 
 .store-modal__product-summary__add-to-cart-button {
   background: none;
@@ -2143,12 +2183,6 @@ body[data-fontdue-store-modal=open] {
   margin: 0;
   appearance: none;
   text-transform: inherit;
-  padding: 10px 20px;
-  white-space: nowrap;
-  background: var(--add_to_cart_button_background_color);
-  border: 1px solid var(--add_to_cart_button_border_color);
-  color: var(--add_to_cart_button_text_color);
-  text-align: center;
 }
 .store-modal__product-summary__add-to-cart-button:active, .store-modal__product-summary__add-to-cart-button:focus {
   outline: none;
@@ -2156,6 +2190,14 @@ body[data-fontdue-store-modal=open] {
 .store-modal__product-summary__add-to-cart-button:not(:disabled) {
   cursor: pointer;
 }
+.store-modal__product-summary__add-to-cart-button {
+  padding: 10px 20px;
+  white-space: nowrap;
+  background: var(--add_to_cart_button_background_color);
+  border: 1px solid var(--add_to_cart_button_border_color);
+  color: var(--add_to_cart_button_text_color);
+  text-align: center;
+}
 .store-modal__product-summary__add-to-cart-button:hover:not(:disabled) {
   background: var(--add_to_cart_button_hover_background_color);
   border: 1px solid var(--add_to_cart_button_hover_border_color);
@@ -2227,12 +2269,6 @@ body[data-fontdue-store-modal=open] {
   margin: 0;
   appearance: none;
   text-transform: inherit;
-  background: var(--button_background_color);
-  border: 1px solid var(--button_border_color);
-  color: var(--button_text_color);
-  padding: 10px 20px;
-  width: 100%;
-  text-align: center;
 }
 .cart-additions__expand-button:active, .cart-additions__expand-button:focus {
   outline: none;
@@ -2240,6 +2276,14 @@ body[data-fontdue-store-modal=open] {
 .cart-additions__expand-button:not(:disabled) {
   cursor: pointer;
 }
+.cart-additions__expand-button {
+  background: var(--button_background_color);
+  border: 1px solid var(--button_border_color);
+  color: var(--button_text_color);
+  padding: 10px 20px;
+  width: 100%;
+  text-align: center;
+}
 .cart-additions__expand-button:hover {
   background: var(--button_hover_background_color);
   border-color: var(--button_hover_border_color);
@@ -2280,7 +2324,6 @@ body[data-fontdue-store-modal=open] {
   margin: 0;
   appearance: none;
   text-transform: inherit;
-  z-index: 2;
 }
 .cart-additions__button:active, .cart-additions__button:focus {
   outline: none;
@@ -2288,6 +2331,9 @@ body[data-fontdue-store-modal=open] {
 .cart-additions__button:not(:disabled) {
   cursor: pointer;
 }
+.cart-additions__button {
+  z-index: 2;
+}
 .cart-additions__button:disabled {
   z-index: 0;
   opacity: 0.5;
@@ -2520,7 +2566,6 @@ body[data-fontdue-store-modal=open] {
   margin: 0;
   appearance: none;
   text-transform: inherit;
-  padding: 10px;
 }
 .cart-item__license-variable__text-input-button:active, .cart-item__license-variable__text-input-button:focus {
   outline: none;
@@ -2528,6 +2573,9 @@ body[data-fontdue-store-modal=open] {
 .cart-item__license-variable__text-input-button:not(:disabled) {
   cursor: pointer;
 }
+.cart-item__license-variable__text-input-button {
+  padding: 10px;
+}
 .cart-item__license-variable__text-input-button span {
   margin-left: 0.5em;
   color: var(--text-input-edit-color, var(--secondary_text_color));
@@ -2574,9 +2622,6 @@ body[data-fontdue-store-modal=open] {
   margin: 0;
   appearance: none;
   text-transform: inherit;
-  color: var(--additional-license-color, var(--link_color));
-  border-bottom: 1px solid var(--additional-license-border-color, var(--link_color));
-  margin: 0 5px;
 }
 .cart-item__additional-licenses__item:active, .cart-item__additional-licenses__item:focus {
   outline: none;
@@ -2584,6 +2629,11 @@ body[data-fontdue-store-modal=open] {
 .cart-item__additional-licenses__item:not(:disabled) {
   cursor: pointer;
 }
+.cart-item__additional-licenses__item {
+  color: var(--additional-license-color, var(--link_color));
+  border-bottom: 1px solid var(--additional-license-border-color, var(--link_color));
+  margin: 0 5px;
+}
 .cart-item__additional-licenses__item:hover {
   color: var(--link_hover_color);
   border-color: var(--link_hover_color);
@@ -2619,9 +2669,6 @@ body[data-fontdue-store-modal=open] {
   margin: 0;
   appearance: none;
   text-transform: inherit;
-  margin-left: 10px;
-  margin-right: -3px;
-  vertical-align: middle;
 }
 .cart__remove-discount-button:active, .cart__remove-discount-button:focus {
   outline: none;
@@ -2629,6 +2676,11 @@ body[data-fontdue-store-modal=open] {
 .cart__remove-discount-button:not(:disabled) {
   cursor: pointer;
 }
+.cart__remove-discount-button {
+  margin-left: 10px;
+  margin-right: -3px;
+  vertical-align: middle;
+}
 .cart__remove-discount-button .icon {
   width: 16px;
   height: 16px;
@@ -2668,6 +2720,11 @@ body[data-fontdue-store-modal=open] {
   margin: 0;
   appearance: none;
   text-transform: inherit;
+}
+.cart__share-url-input:active, .cart__share-url-input:focus {
+  outline: none;
+}
+.cart__share-url-input {
   min-width: 0;
   flex: 1 1 0;
   color: currentcolor;
@@ -2676,9 +2733,6 @@ body[data-fontdue-store-modal=open] {
   border: 1px solid var(--secondary_background_color);
   border-right: none;
 }
-.cart__share-url-input:active, .cart__share-url-input:focus {
-  outline: none;
-}
 .cart__share-url-input:focus {
   border-color: var(--primary_text_color);
 }
@@ -2703,11 +2757,6 @@ body[data-fontdue-store-modal=open] {
   margin: 0;
   appearance: none;
   text-transform: inherit;
-  text-align: center;
-  background: var(--button_background_color);
-  border: 1px solid var(--button_border_color);
-  color: var(--button_text_color);
-  padding: 10px 20px;
 }
 .cart__share__button:active, .cart__share__button:focus {
   outline: none;
@@ -2715,6 +2764,13 @@ body[data-fontdue-store-modal=open] {
 .cart__share__button:not(:disabled) {
   cursor: pointer;
 }
+.cart__share__button {
+  text-align: center;
+  background: var(--button_background_color);
+  border: 1px solid var(--button_border_color);
+  color: var(--button_text_color);
+  padding: 10px 20px;
+}
 .cart__share__button:hover {
   background: var(--button_hover_background_color);
   border-color: var(--button_hover_border_color);
@@ -2803,9 +2859,6 @@ body[data-fontdue-store-modal=open] {
   margin: 0;
   appearance: none;
   text-transform: inherit;
-  width: 100%;
-  display: flex;
-  align-items: center;
 }
 .checkout-modal__customer-info__button:active, .checkout-modal__customer-info__button:focus {
   outline: none;
@@ -2813,6 +2866,11 @@ body[data-fontdue-store-modal=open] {
 .checkout-modal__customer-info__button:not(:disabled) {
   cursor: pointer;
 }
+.checkout-modal__customer-info__button {
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
 .checkout-modal__customer-info__button .icon {
   display: none;
 }
@@ -2864,6 +2922,14 @@ body[data-fontdue-store-modal=open] {
   margin: 0;
   appearance: none;
   text-transform: inherit;
+}
+.checkout-modal__button:active, .checkout-modal__button:focus {
+  outline: none;
+}
+.checkout-modal__button:not(:disabled) {
+  cursor: pointer;
+}
+.checkout-modal__button {
   padding: 20px;
   border: 1px solid;
   text-align: right;
@@ -2873,12 +2939,6 @@ body[data-fontdue-store-modal=open] {
   border-color: var(--checkout_button_border_color);
   color: var(--checkout_button_text_color);
 }
-.checkout-modal__button:active, .checkout-modal__button:focus {
-  outline: none;
-}
-.checkout-modal__button:not(:disabled) {
-  cursor: pointer;
-}
 .checkout-modal__button[disabled] {
   opacity: 0.5;
   pointer-events: none;
@@ -2915,11 +2975,13 @@ body[data-fontdue-store-modal=open] {
 
 .react-select {
   margin-top: 5px;
-  /* specificity to override defaults */
 }
 .react-select__label-wrapper {
   color: var(--secondary_text_color);
 }
+.react-select {
+  /* specificity to override defaults */
+}
 .react-select .react-select__control {
   font-size: 20px;
   border-radius: 0;
@@ -2942,7 +3004,7 @@ body[data-fontdue-store-modal=open] {
   color: var(--primary_text_color);
 }
 .react-select .react-select__option--is-selected, .react-select .react-select__option--is-focused, .react-select .react-select__option:hover, .react-select .react-select__option:active {
-  background: var(--secondary_background_color, color(grey));
+  background: var(--secondary_background_color, grey);
   color: var(--primary_text_color);
 }
 .react-select .react-select__input {
@@ -2956,7 +3018,7 @@ body[data-fontdue-store-modal=open] {
   transition: none;
 }
 .react-select__errors {
-  color: color(red);
+  color: red;
   margin-top: 10px;
 }
 
@@ -2986,14 +3048,16 @@ textarea.text-field__input {
   margin: 0;
   appearance: none;
   text-transform: inherit;
+}
+.text-field__input:active, .text-field__input:focus {
+  outline: none;
+}
+.text-field__input {
   flex: 1;
   color: currentcolor;
   padding: 12px;
   background: var(--secondary_background_color);
 }
-.text-field__input:active, .text-field__input:focus {
-  outline: none;
-}
 .text-field__input::placeholder {
   color: var(--secondary_text_color);
 }