@fkui/design 6.7.1 → 6.9.0

package/lib/fkui.css

@@ -1660,18 +1660,12 @@ input[type=search]:focus,
   color: var(--f-text-color-button-standard, #4a52b6);
   padding: calc(var(--f-button-standard-padding-top, 1rem) * var(--f-density-factor, 1)) var(--f-button-standard-padding-right, 1.5rem) calc(var(--f-button-standard-padding-bottom, 1rem) * var(--f-density-factor, 1)) var(--f-button-standard-padding-left, 1.5rem);
 }
-.button > .button__icon {
-  color: var(--f-text-color-button-standard, #4a52b6);
-}
 .button:hover {
   background-color: var(--fkds-color-action-background-secondary-hover, #e5e5f5);
   border-color: var(--fkds-color-action-border-primary-default, #4a52b6);
   color: var(--f-text-color-button-standard, #4a52b6);
   box-shadow: var(--f-button-shadow-hover, 0 1px 3px rgba(0, 0, 0, 0.3));
 }
-.button:hover > .button__icon {
-  color: var(--f-text-color-button-standard, #4a52b6);
-}
 .button:active, .button:focus {
   border-radius: 0;
   box-shadow: var(--f-focus-box-shadow, 0 0 0 2px #ffffff, 0 0 0 4px #1b1e23, 0 0 0 6px #ffffff);
@@ -1680,16 +1674,10 @@ input[type=search]:focus,
   border-color: var(--fkds-color-action-border-primary-default, #4a52b6);
   color: var(--f-text-color-button-standard, #4a52b6);
 }
-.button:active > .button__icon, .button:focus > .button__icon {
-  color: var(--f-text-color-button-standard, #4a52b6);
-}
 .button.disabled, .button.disabled:hover, .button:disabled, .button:disabled:hover, .button.button--disabled, .button.button--disabled:hover {
-  background-color: var(--fkds-color-action-background-disabled, #f4f4f4);
-  border-color: var(--fkds-color-action-border-disabled, #8d8e91);
-  color: var(--fkds-color-action-text-disabled, #8d8e91);
-}
-.button.disabled > .button__icon, .button.disabled:hover > .button__icon, .button:disabled > .button__icon, .button:disabled:hover > .button__icon, .button.button--disabled > .button__icon, .button.button--disabled:hover > .button__icon {
-  color: var(--fkds-color-action-text-disabled, #8d8e91);
+  background-color: var(--fkds-color-background-disabled, #f4f4f4);
+  border-color: var(--fkds-color-border-disabled, #8d8e91);
+  color: var(--fkds-color-text-disabled, #8d8e91);
 }
 .button.button--primary {
   background-color: var(--fkds-color-action-background-primary-default, #4a52b6);
@@ -1699,18 +1687,12 @@ input[type=search]:focus,
   color: var(--fkds-color-action-text-inverted-default, #ffffff);
   padding: calc(var(--f-button-primary-padding-top, 1rem) * var(--f-density-factor, 1)) var(--f-button-primary-padding-right, 1.5rem) calc(var(--f-button-primary-padding-bottom, 1rem) * var(--f-density-factor, 1)) var(--f-button-primary-padding-left, 1.5rem);
 }
-.button.button--primary > .button__icon {
-  color: var(--fkds-color-action-text-inverted-default, #ffffff);
-}
 .button.button--primary:hover {
   background-color: var(--fkds-color-action-background-primary-hover, #3b4292);
   border-color: transparent;
   color: var(--fkds-color-action-text-inverted-default, #ffffff);
   box-shadow: var(--f-button-shadow-hover, 0 1px 3px rgba(0, 0, 0, 0.3));
 }
-.button.button--primary:hover > .button__icon {
-  color: var(--fkds-color-action-text-inverted-default, #ffffff);
-}
 .button.button--primary:active, .button.button--primary:focus {
   border-radius: 0;
   box-shadow: var(--f-focus-box-shadow, 0 0 0 2px #ffffff, 0 0 0 4px #1b1e23, 0 0 0 6px #ffffff);
@@ -1719,16 +1701,10 @@ input[type=search]:focus,
   border-color: transparent;
   color: var(--fkds-color-action-text-inverted-default, #ffffff);
 }
-.button.button--primary:active > .button__icon, .button.button--primary:focus > .button__icon {
-  color: var(--fkds-color-action-text-inverted-default, #ffffff);
-}
 .button.button--primary.disabled, .button.button--primary.disabled:hover, .button.button--primary:disabled, .button.button--primary:disabled:hover, .button.button--primary.button--disabled, .button.button--primary.button--disabled:hover {
-  background-color: var(--fkds-color-action-background-disabled, #f4f4f4);
-  border-color: var(--fkds-color-action-border-disabled, #8d8e91);
-  color: var(--fkds-color-action-text-disabled, #8d8e91);
-}
-.button.button--primary.disabled > .button__icon, .button.button--primary.disabled:hover > .button__icon, .button.button--primary:disabled > .button__icon, .button.button--primary:disabled:hover > .button__icon, .button.button--primary.button--disabled > .button__icon, .button.button--primary.button--disabled:hover > .button__icon {
-  color: var(--fkds-color-action-text-disabled, #8d8e91);
+  background-color: var(--fkds-color-background-disabled, #f4f4f4);
+  border-color: var(--fkds-color-border-disabled, #8d8e91);
+  color: var(--fkds-color-text-disabled, #8d8e91);
 }
 .button.button--secondary {
   background-color: var(--fkds-color-action-background-secondary-default, #f5f6fa);
@@ -1738,18 +1714,12 @@ input[type=search]:focus,
   color: var(--fkds-color-action-text-primary-default, #4a52b6);
   padding: calc(var(--f-button-secondary-padding-top, 1rem) * var(--f-density-factor, 1)) var(--f-button-secondary-padding-right, 1.5rem) calc(var(--f-button-secondary-padding-bottom, 1rem) * var(--f-density-factor, 1)) var(--f-button-secondary-padding-left, 1.5rem);
 }
-.button.button--secondary > .button__icon {
-  color: var(--fkds-color-action-text-primary-default, #4a52b6);
-}
 .button.button--secondary:hover {
   background-color: var(--fkds-color-action-background-secondary-hover, #e5e5f5);
   border-color: var(--fkds-color-action-border-primary-default, #4a52b6);
   color: var(--fkds-color-action-text-primary-default, #4a52b6);
   box-shadow: var(--f-button-shadow-hover, 0 1px 3px rgba(0, 0, 0, 0.3));
 }
-.button.button--secondary:hover > .button__icon {
-  color: var(--fkds-color-action-text-primary-default, #4a52b6);
-}
 .button.button--secondary:active, .button.button--secondary:focus {
   border-radius: 0;
   box-shadow: var(--f-focus-box-shadow, 0 0 0 2px #ffffff, 0 0 0 4px #1b1e23, 0 0 0 6px #ffffff);
@@ -1758,16 +1728,10 @@ input[type=search]:focus,
   border-color: var(--fkds-color-action-border-primary-default, #4a52b6);
   color: var(--fkds-color-action-text-primary-default, #4a52b6);
 }
-.button.button--secondary:active > .button__icon, .button.button--secondary:focus > .button__icon {
-  color: var(--fkds-color-action-text-primary-default, #4a52b6);
-}
 .button.button--secondary.disabled, .button.button--secondary.disabled:hover, .button.button--secondary:disabled, .button.button--secondary:disabled:hover, .button.button--secondary.button--disabled, .button.button--secondary.button--disabled:hover {
-  background-color: var(--fkds-color-action-background-disabled, #f4f4f4);
-  border-color: var(--fkds-color-action-border-disabled, #8d8e91);
-  color: var(--fkds-color-action-text-disabled, #8d8e91);
-}
-.button.button--secondary.disabled > .button__icon, .button.button--secondary.disabled:hover > .button__icon, .button.button--secondary:disabled > .button__icon, .button.button--secondary:disabled:hover > .button__icon, .button.button--secondary.button--disabled > .button__icon, .button.button--secondary.button--disabled:hover > .button__icon {
-  color: var(--fkds-color-action-text-disabled, #8d8e91);
+  background-color: var(--fkds-color-background-disabled, #f4f4f4);
+  border-color: var(--fkds-color-border-disabled, #8d8e91);
+  color: var(--fkds-color-text-disabled, #8d8e91);
 }
 .button.button--discrete, .button.button--text {
   width: inherit;
@@ -1782,18 +1746,12 @@ input[type=search]:focus,
   color: var(--f-text-color-button-discrete, #4a52b6);
   padding: calc(var(--f-button-discrete-padding-top, initial) * var(--f-density-factor, 1)) var(--f-button-discrete-padding-right, initial) calc(var(--f-button-discrete-padding-bottom, initial) * var(--f-density-factor, 1)) var(--f-button-discrete-padding-left, initial);
 }
-.button.button--discrete > .button__icon, .button.button--text > .button__icon {
-  color: var(--f-text-color-button-discrete, #4a52b6);
-}
 .button.button--discrete:hover, .button.button--text:hover {
   background-color: var(--f-background-button-discrete-hover, none);
   border-color: transparent;
   color: var(--f-text-color-button-discrete-hover, #3b4292);
   box-shadow: var(--f-button-shadow-hover, 0 1px 3px rgba(0, 0, 0, 0.3));
 }
-.button.button--discrete:hover > .button__icon, .button.button--text:hover > .button__icon {
-  color: var(--f-text-color-button-discrete-hover, #3b4292);
-}
 .button.button--discrete:active, .button.button--text:active, .button.button--discrete:focus, .button.button--text:focus {
   border-radius: 0;
   box-shadow: var(--f-focus-box-shadow, 0 0 0 2px #ffffff, 0 0 0 4px #1b1e23, 0 0 0 6px #ffffff);
@@ -1802,17 +1760,11 @@ input[type=search]:focus,
   border-color: transparent;
   color: var(--f-text-color-button-discrete-hover, #3b4292);
 }
-.button.button--discrete:active > .button__icon, .button.button--text:active > .button__icon, .button.button--discrete:focus > .button__icon, .button.button--text:focus > .button__icon {
-  color: var(--f-text-color-button-discrete-hover, #3b4292);
-}
 .button.button--discrete.disabled, .button.disabled.button--text, .button.button--discrete.disabled:hover, .button.button--discrete:disabled, .button.button--text:disabled, .button.button--discrete:disabled:hover, .button.button--discrete.button--disabled, .button.button--disabled.button--text, .button.button--discrete.button--disabled:hover {
   background-color: transparent;
   border-color: transparent;
   color: var(--f-text-color-button-discrete-disabled, #8d8e91);
 }
-.button.button--discrete.disabled > .button__icon, .button.disabled.button--text > .button__icon, .button.button--discrete.disabled:hover > .button__icon, .button.button--discrete:disabled > .button__icon, .button.button--text:disabled > .button__icon, .button.button--discrete:disabled:hover > .button__icon, .button.button--discrete.button--disabled > .button__icon, .button.button--disabled.button--text > .button__icon, .button.button--discrete.button--disabled:hover > .button__icon {
-  color: var(--f-text-color-button-discrete-disabled, #8d8e91);
-}
 @media (max-width: 639.98px) {
   .button.button--discrete, .button.button--text {
     width: auto;
@@ -1856,18 +1808,12 @@ input[type=search]:focus,
   color: var(--f-text-color-button-discrete-inverted, #ffffff);
   padding: calc(var(--f-button-discrete-padding-top, initial) * var(--f-density-factor, 1)) var(--f-button-discrete-padding-right, initial) calc(var(--f-button-discrete-padding-bottom, initial) * var(--f-density-factor, 1)) var(--f-button-discrete-padding-left, initial);
 }
-.button.button--discrete-inverted > .button__icon {
-  color: var(--f-text-color-button-discrete-inverted, #ffffff);
-}
 .button.button--discrete-inverted:hover {
   background-color: transparent;
   border-color: transparent;
   color: var(--f-text-color-button-discrete-inverted-hover, #ffffff);
   box-shadow: var(--f-button-shadow-hover, 0 1px 3px rgba(0, 0, 0, 0.3));
 }
-.button.button--discrete-inverted:hover > .button__icon {
-  color: var(--f-text-color-button-discrete-inverted-hover, #ffffff);
-}
 .button.button--discrete-inverted:active, .button.button--discrete-inverted:focus {
   border-radius: 0;
   box-shadow: var(--f-focus-box-shadow, 0 0 0 2px #ffffff, 0 0 0 4px #1b1e23, 0 0 0 6px #ffffff);
@@ -1876,17 +1822,11 @@ input[type=search]:focus,
   border-color: transparent;
   color: var(--f-text-color-button-discrete-inverted-hover, #ffffff);
 }
-.button.button--discrete-inverted:active > .button__icon, .button.button--discrete-inverted:focus > .button__icon {
-  color: var(--f-text-color-button-discrete-inverted-hover, #ffffff);
-}
 .button.button--discrete-inverted.disabled, .button.button--discrete-inverted.disabled:hover, .button.button--discrete-inverted:disabled, .button.button--discrete-inverted:disabled:hover, .button.button--discrete-inverted.button--disabled, .button.button--discrete-inverted.button--disabled:hover {
   background-color: transparent;
   border-color: transparent;
   color: var(--f-text-color-button-discrete-inverted-disabled, #e5e5f5);
 }
-.button.button--discrete-inverted.disabled > .button__icon, .button.button--discrete-inverted.disabled:hover > .button__icon, .button.button--discrete-inverted:disabled > .button__icon, .button.button--discrete-inverted:disabled:hover > .button__icon, .button.button--discrete-inverted.button--disabled > .button__icon, .button.button--discrete-inverted.button--disabled:hover > .button__icon {
-  color: var(--f-text-color-button-discrete-inverted-disabled, #e5e5f5);
-}
 @media (max-width: 639.98px) {
   .button.button--discrete-inverted {
     width: auto;
@@ -1907,18 +1847,12 @@ input[type=search]:focus,
   color: var(--fkds-color-action-text-primary-default, #4a52b6);
   padding: calc(var(--f-button-tertiary-padding-top, 0.75rem) * var(--f-density-factor, 1)) var(--f-button-tertiary-padding-right, 0.5rem) calc(var(--f-button-tertiary-padding-bottom, 0.75rem) * var(--f-density-factor, 1)) var(--f-button-tertiary-padding-left, 0.5rem);
 }
-.button.button--tertiary > .button__icon {
-  color: var(--fkds-color-action-text-primary-default, #4a52b6);
-}
 .button.button--tertiary:hover {
   background-color: var(--fkds-color-action-background-secondary-hover, #e5e5f5);
   border-color: transparent;
   color: var(--fkds-color-action-text-primary-default, #4a52b6);
   box-shadow: none;
 }
-.button.button--tertiary:hover > .button__icon {
-  color: var(--fkds-color-action-text-primary-default, #4a52b6);
-}
 .button.button--tertiary:active, .button.button--tertiary:focus {
   border-radius: 0;
   box-shadow: var(--f-focus-box-shadow, 0 0 0 2px #ffffff, 0 0 0 4px #1b1e23, 0 0 0 6px #ffffff);
@@ -1927,17 +1861,11 @@ input[type=search]:focus,
   border-color: transparent;
   color: var(--fkds-color-action-text-primary-default, #4a52b6);
 }
-.button.button--tertiary:active > .button__icon, .button.button--tertiary:focus > .button__icon {
-  color: var(--fkds-color-action-text-primary-default, #4a52b6);
-}
 .button.button--tertiary.disabled, .button.button--tertiary.disabled:hover, .button.button--tertiary:disabled, .button.button--tertiary:disabled:hover, .button.button--tertiary.button--disabled, .button.button--tertiary.button--disabled:hover {
   background-color: transparent;
   border-color: transparent;
   color: var(--fkds-color-text-disabled, #8d8e91);
 }
-.button.button--tertiary.disabled > .button__icon, .button.button--tertiary.disabled:hover > .button__icon, .button.button--tertiary:disabled > .button__icon, .button.button--tertiary:disabled:hover > .button__icon, .button.button--tertiary.button--disabled > .button__icon, .button.button--tertiary.button--disabled:hover > .button__icon {
-  color: var(--fkds-color-text-disabled, #8d8e91);
-}
 @media (max-width: 639.98px) {
   .button.button--tertiary {
     width: auto;
@@ -1946,36 +1874,21 @@ input[type=search]:focus,
 .button.button--tertiary--black {
   color: var(--fkds-color-action-text-secondary-default, #1b1e23);
 }
-.button.button--tertiary--black > .button__icon {
-  color: var(--fkds-icon-color-action-content-secondary-default, #1b1e23);
-}
 .button.button--tertiary--black:hover, .button.button--tertiary--black:active, .button.button--tertiary--black:focus {
   color: var(--fkds-color-action-text-secondary-default, #1b1e23);
 }
-.button.button--tertiary--black:hover > .button__icon, .button.button--tertiary--black:active > .button__icon, .button.button--tertiary--black:focus > .button__icon {
-  color: var(--fkds-icon-color-action-content-secondary-default, #1b1e23);
-}
 .button.button--tertiary--inverted {
   color: var(--fkds-color-action-text-inverted-default, #ffffff);
 }
-.button.button--tertiary--inverted > .button__icon {
-  color: var(--fkds-icon-color-action-content-inverted-default, #ffffff);
-}
 .button.button--tertiary--inverted:hover, .button.button--tertiary--inverted:active, .button.button--tertiary--inverted:focus {
   color: var(--fkds-color-action-text-inverted-focus, #ffffff);
   background-color: transparent;
 }
-.button.button--tertiary--inverted:hover > .button__icon, .button.button--tertiary--inverted:active > .button__icon, .button.button--tertiary--inverted:focus > .button__icon {
-  color: var(--fkds-icon-color-action-content-inverted-default, #ffffff);
-}
 .button.button--tertiary--inverted:disabled {
   color: var(--fkds-color-text-disabled, #8d8e91);
   border-width: 0;
   background-color: transparent;
 }
-.button.button--tertiary--inverted:disabled > .button__icon {
-  color: var(--fkds-icon-color-action-content-primary-disabled, #8d8e91);
-}
 .button.button--tertiary--underline {
   text-decoration: underline;
   text-decoration-thickness: 2px;
@@ -2854,11 +2767,11 @@ input[type=search]:focus,
 }
 .radio-button-group--chip .radio-button__label:hover {
   border-color: var(--fkds-color-border-primary, #8d8e91);
-  background-color: var(--fkds-color-select-background-primary-hover, #dbe9e2);
+  background-color: var(--fkds-color-select-background-secondary-hover, #dbe9e2);
   color: var(--fkds-color-text-primary, #1b1e23);
 }
 .radio-button-group--chip input[type=radio]:checked + .radio-button__label {
-  background: var(--fkds-color-select-background-primary-default, #35805b);
+  background: var(--fkds-color-select-background-secondary-default, #35805b);
   border-color: transparent;
   color: var(--fkds-color-text-inverted, #ffffff);
 }
@@ -2921,11 +2834,11 @@ input[type=search]:focus,
 }
 .checkbox-group--chip .checkbox__label:hover {
   border-color: var(--fkds-color-border-primary, #8d8e91);
-  background-color: var(--fkds-color-select-background-primary-hover, #dbe9e2);
+  background-color: var(--fkds-color-select-background-secondary-hover, #dbe9e2);
   color: var(--fkds-color-text-primary, #1b1e23);
 }
 .checkbox-group--chip input[type=checkbox]:checked + .checkbox__label {
-  background: var(--fkds-color-select-background-primary-default, #35805b);
+  background: var(--fkds-color-select-background-secondary-default, #35805b);
   border-color: transparent;
   color: var(--fkds-color-text-inverted, #ffffff);
 }
@@ -2987,11 +2900,11 @@ input[type=search]:focus,
   white-space: nowrap;
 }
 .combobox__listbox__option:hover {
-  background-color: var(--fkds-color-select-background-primary-hover, #dbe9e2);
+  background-color: var(--fkds-color-select-background-primary-hover, #e5e5f5);
   color: var(--fkds-color-text-primary, #1b1e23);
 }
 .combobox__listbox__option--highlight {
-  background-color: var(--fkds-color-select-background-primary-default, #35805b);
+  background-color: var(--fkds-color-select-background-primary-default, #4a52b6);
   color: var(--fkds-color-text-inverted, #ffffff);
   font-weight: var(--f-font-weight-medium, 700);
 }
@@ -3004,7 +2917,7 @@ input[type=search]:focus,
   padding: 0;
 }
 .combobox__button:disabled {
-  color: var(--fkds-icon-color-action-content-primary-disabled, #8d8e91);
+  color: var(--fkds-icon-color-content-disabled, #8d8e91);
 }
 
 .contextmenu {
@@ -3334,6 +3247,7 @@ input[type=search]:focus,
 }
 .file-item__file-name {
   margin-left: 0.25rem;
+  min-width: 0;
   overflow-wrap: break-word;
   white-space: normal;
 }
@@ -5191,7 +5105,7 @@ input[type=search]:focus,
   background-color: var(--fkds-color-background-primary, #ffffff);
 }
 .select-field__select:disabled {
-  border-color: var(--fkds-color-border-primary, #8d8e91);
+  border-color: var(--fkds-color-border-disabled, #8d8e91);
   color: var(--fkds-color-text-disabled, #8d8e91);
   background-color: var(--fkds-color-background-disabled, #f4f4f4);
   opacity: 1;
@@ -5528,18 +5442,12 @@ input[type=search]:focus,
   width: -moz-max-content;
   width: max-content;
 }
-.table__button > .button__icon {
-  color: var(--fkds-color-action-text-primary-default, #4a52b6);
-}
 .table__button:hover {
   background-color: var(--fkds-color-action-background-secondary-hover, #e5e5f5);
   border-color: transparent;
   color: var(--fkds-color-action-text-primary-default, #4a52b6);
   box-shadow: none;
 }
-.table__button:hover > .button__icon {
-  color: var(--fkds-color-action-text-primary-default, #4a52b6);
-}
 .table__button:active, .table__button:focus {
   border-radius: 0;
   box-shadow: var(--f-focus-box-shadow, 0 0 0 2px #ffffff, 0 0 0 4px #1b1e23, 0 0 0 6px #ffffff);
@@ -5548,17 +5456,11 @@ input[type=search]:focus,
   border-color: transparent;
   color: var(--fkds-color-action-text-primary-default, #4a52b6);
 }
-.table__button:active > .button__icon, .table__button:focus > .button__icon {
-  color: var(--fkds-color-action-text-primary-default, #4a52b6);
-}
 .table__button.disabled, .table__button.disabled:hover, .table__button:disabled, .table__button:disabled:hover, .table__button.table__button--disabled, .table__button.table__button--disabled:hover {
   background-color: transparent;
   border-color: transparent;
   color: var(--fkds-color-text-disabled, #8d8e91);
 }
-.table__button.disabled > .button__icon, .table__button.disabled:hover > .button__icon, .table__button:disabled > .button__icon, .table__button:disabled:hover > .button__icon, .table__button.table__button--disabled > .button__icon, .table__button.table__button--disabled:hover > .button__icon {
-  color: var(--fkds-color-text-disabled, #8d8e91);
-}
 .table__button .button__icon {
   margin: var(--f-button-tertiary-table-column-action-icon-margin, 0 2px 0 2px);
   transform: translate(0, 10%);
@@ -5641,7 +5543,7 @@ input[type=search]:focus,
   color: var(--fkds-icon-color-content-disabled, #8d8e91);
 }
 .text-field__input:disabled {
-  border-color: var(--fkds-color-border-primary, #8d8e91);
+  border-color: var(--fkds-color-border-disabled, #8d8e91);
   color: var(--fkds-color-text-disabled, #8d8e91);
   background-color: var(--fkds-color-background-disabled, #f4f4f4);
 }
@@ -5711,7 +5613,7 @@ input[type=search]:focus,
   height: auto;
 }
 .textarea-field__textarea:disabled {
-  border-color: var(--fkds-color-border-primary, #8d8e91);
+  border-color: var(--fkds-color-border-disabled, #8d8e91);
   color: var(--fkds-color-text-disabled, #8d8e91);
   background-color: var(--fkds-color-background-disabled, #f4f4f4);
 }
@@ -5912,6 +5814,7 @@ input[type=search]:focus,
 }
 .wizard-step .wizard-step__content {
   margin-left: 0.5rem;
+  min-width: 0;
   grid-area: wizard-step__content;
 }
 .wizard-step .wizard-step__line-up {
@@ -6230,19 +6133,18 @@ input[type=search]:focus,
   text-align: center;
   border-bottom: 1px solid var(--f-border-color-calendar-navbar, #ddddde);
   padding: 1rem;
+  gap: 1rem;
   margin-bottom: 0.75rem;
   font-size: var(--f-font-size-h4, 1.25rem);
 }
 .calendar-navbar__month {
-  order: 2;
+  margin-right: auto;
+  font-size: 1.5rem;
+  font-weight: bold;
 }
 .calendar-navbar__arrow--previous {
-  order: 1;
   transform: scaleX(-1);
 }
-.calendar-navbar__arrow--next {
-  order: 3;
-}
 .calendar-navbar__icon {
   color: var(--f-icon-color-white, #ffffff);
   background-color: var(--f-icon-color-primary, #4a52b6);