@esri/calcite-components 1.0.0-beta.70 → 1.0.0-beta.74

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

@@ -1,53 +1,48 @@
 /* mixins & extensions */
-
 @keyframes in {
   0% {
     opacity: 0;
   }
-
   100% {
     opacity: 1;
   }
 }
-
 @keyframes in-down {
   0% {
     opacity: 0;
     transform: translate3D(0, -5px, 0);
   }
-
   100% {
     opacity: 1;
     transform: translate3D(0, 0, 0);
   }
 }
-
 @keyframes in-up {
   0% {
     opacity: 0;
     transform: translate3D(0, 5px, 0);
   }
-
   100% {
     opacity: 1;
     transform: translate3D(0, 0, 0);
   }
 }
-
 @keyframes in-scale {
   0% {
     opacity: 0;
     transform: scale3D(0.95, 0.95, 1);
   }
-
   100% {
     opacity: 1;
     transform: scale3D(1, 1, 1);
   }
 }
-
 :root {
-  --calcite-animation-timing: 300ms;
+  --calcite-animation-timing: calc(150ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-duration-factor: var(--calcite-duration-factor, 1);
+  --calcite-internal-animation-timing-fast: calc(100ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-duration-factor));
 }
 
 .calcite-animate {
@@ -75,9 +70,8 @@
 /**
 * Currently only used in Checkbox.
 */
-
 :root {
-  --calcite-popper-transition: 150ms ease-in-out;
+  --calcite-popper-transition: var(--calcite-animation-timing);
 }
 
 :host([hidden]) {
@@ -93,20 +87,16 @@
 :host([round]) {
   border-radius: 50px;
 }
-
 :host([round]) a, :host([round]) button {
   border-radius: 50px;
 }
 
-:host button,
-:host a {
+:host button, :host a {
   outline-offset: 0;
   outline-color: transparent;
   transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
 }
-
-:host button:focus,
-:host a:focus {
+:host button:focus, :host a:focus {
   outline: 2px solid var(--calcite-ui-brand);
   outline-offset: 2px;
 }
@@ -118,36 +108,44 @@
   --calcite-button-padding-y: 3px;
   padding: var(--calcite-button-padding-y) var(--calcite-button-padding-x) var(--calcite-button-padding-y) var(--calcite-button-padding-x);
   position: relative;
+  box-sizing: border-box;
   display: flex;
-  align-items: center;
-  justify-content: center;
-  text-decoration: none;
-  width: 100%;
   height: 100%;
-  border-radius: 0;
-  border-style: none;
+  width: 100%;
+  cursor: pointer;
   -webkit-user-select: none;
           user-select: none;
   -webkit-appearance: none;
           appearance: none;
-  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0px;
+  border-style: none;
   text-align: center;
-  box-sizing: border-box;
   font-family: inherit;
   font-weight: var(--calcite-font-weight-normal);
-  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
+  -webkit-text-decoration-line: none;
+          text-decoration-line: none;
+  transition: color var(--calcite-animation-timing) ease-in-out, background-color var(--calcite-animation-timing) ease-in-out, box-shadow var(--calcite-animation-timing) ease-in-out, outline-offset var(--calcite-internal-animation-timing-fast) ease-in-out, outline-color var(--calcite-internal-animation-timing-fast) ease-in-out;
 }
-
-:host button:hover,
-:host a:hover {
-  text-decoration: none;
+:host button:hover, :host a:hover {
+  -webkit-text-decoration-line: none;
+          text-decoration-line: none;
 }
 
 .content {
   display: flex;
   flex-basis: auto;
-  margin-left: var(--calcite-button-content-margin);
-  margin-right: var(--calcite-button-content-margin);
+  margin-inline-start: var(--calcite-button-content-margin);
+  margin-inline-end: var(--calcite-button-content-margin);
+}
+
+.icon-start-empty .content {
+  margin-inline-start: unset;
+}
+
+.icon-end-empty .content {
+  margin-inline-end: unset;
 }
 
 :host([scale=m]) button,
@@ -160,24 +158,6 @@
   --calcite-button-content-margin: 1rem;
 }
 
-:host(:not([icon-start])) .content {
-  margin-left: unset;
-}
-
-:host(:not([icon-end])) .content {
-  margin-right: unset;
-}
-
-:host([icon-start]:not([icon-end])) .calcite--rtl .content {
-  margin-left: unset;
-  margin-right: var(--calcite-button-content-margin);
-}
-
-:host([icon-end]:not([icon-start])) .calcite--rtl .content {
-  margin-right: unset;
-  margin-left: var(--calcite-button-content-margin);
-}
-
 :host([width=auto]) {
   width: auto;
 }
@@ -190,82 +170,55 @@
   width: 100%;
 }
 
-:host([alignment=center]:not([width=auto])) a,
-:host([alignment=center]:not([width=auto])) button {
+:host([alignment=center]:not([width=auto])) a, :host([alignment=center]:not([width=auto])) button {
   justify-content: center;
 }
 
-:host([alignment=start]:not([width=auto])) a,
-:host([alignment=start]:not([width=auto])) button {
+:host([alignment=start]:not([width=auto])) a, :host([alignment=start]:not([width=auto])) button {
   justify-content: flex-start;
 }
 
-:host([alignment=end]:not([width=auto])) a,
-:host([alignment=end]:not([width=auto])) button {
+:host([alignment=end]:not([width=auto])) a, :host([alignment=end]:not([width=auto])) button {
   justify-content: flex-end;
 }
 
-:host([alignment*=space-between]:not([width=auto])) a,
-:host([alignment*=space-between]:not([width=auto])) button {
+:host([alignment*=space-between]:not([width=auto])) a, :host([alignment*=space-between]:not([width=auto])) button {
   justify-content: space-between;
 }
 
 :host([alignment=icon-start-space-between]:not([width=auto])) .icon--start {
-  margin-right: auto;
+  margin-inline-end: auto;
 }
-
 :host([alignment=icon-start-space-between]:not([width=auto])) a,
 :host([alignment=icon-start-space-between]:not([width=auto])) button {
   text-align: unset;
 }
 
 :host([alignment=icon-end-space-between]:not([width=auto])) .icon--end {
-  margin-left: auto;
+  margin-inline-start: auto;
 }
-
 :host([alignment=icon-end-space-between]:not([width=auto])) a,
 :host([alignment=icon-end-space-between]:not([width=auto])) button {
   text-align: unset;
 }
 
-:host([alignment=icon-start-space-between]:not([width=auto])) .calcite--rtl .icon--start {
-  margin-right: unset;
-  margin-left: auto;
-}
-
-:host([alignment=icon-end-space-between]:not([width=auto])) .calcite--rtl .icon--end {
-  margin-left: unset;
-  margin-right: auto;
-}
-
 :host([alignment=center]) a:not(.content--slotted) .icon--start + .icon--end,
 :host([alignment=center]) button:not(.content--slotted) .icon--start + .icon--end {
-  margin-left: var(--calcite-button-content-margin);
-}
-
-:host([alignment=center]) a.calcite--rtl:not(.content--slotted) .icon--start + .icon--end,
-:host([alignment=center]) button.calcite--rtl:not(.content--slotted) .icon--start + .icon--end {
-  margin-left: unset;
-  margin-right: var(--calcite-button-content-margin);
+  margin-inline-start: var(--calcite-button-content-margin);
 }
 
 .icon {
-  display: inline-flex;
   position: relative;
-  margin: 0;
+  margin: 0px;
+  display: inline-flex;
   font-weight: var(--calcite-font-weight-normal);
   line-height: inherit;
 }
 
-:host([loading]),
-:host([disabled]) {
+:host([loading]), :host([disabled]) {
   pointer-events: none;
 }
-
-:host([loading]) button,
-:host([loading]) a,
-:host([disabled]) button,
-:host([disabled]) a {
+:host([loading]) button, :host([loading]) a, :host([disabled]) button, :host([disabled]) a {
   pointer-events: none;
   opacity: var(--calcite-ui-opacity-disabled);
 }
@@ -276,42 +229,35 @@
     opacity: 0;
     transform: scale(0.5);
   }
-
   100% {
     width: 1em;
     opacity: 1;
     transform: scale(1);
   }
 }
-
 @keyframes loader-out {
   0% {
     width: 1em;
     opacity: 1;
     transform: scale(1);
   }
-
   100% {
     width: 0;
     opacity: 0;
     transform: scale(0.5);
   }
 }
-
 .calcite-button--loader {
   display: flex;
 }
-
 .calcite-button--loader calcite-loader {
-  margin: 0;
-  transition: width 300ms ease-in-out, opacity 300ms ease-in-out, transform 300ms ease-in-out;
+  margin: 0px;
+  transition: width var(--calcite-internal-animation-timing-slow) ease-in-out, opacity var(--calcite-internal-animation-timing-slow) ease-in-out, transform var(--calcite-internal-animation-timing-slow) ease-in-out;
 }
-
 .calcite-button--loader calcite-loader.loading-in {
   animation-name: loader-in;
   animation-duration: 310ms;
 }
-
 .calcite-button--loader calcite-loader.loading-out {
   animation-name: loader-out;
   animation-duration: 310ms;
@@ -321,398 +267,291 @@
 :host([loading]) a.content--slotted .calcite-button--loader calcite-loader {
   margin-inline-end: var(--calcite-button-content-margin);
 }
-
-:host([loading]) button:not(.content--slotted) .icon--start,
-:host([loading]) button:not(.content--slotted) .icon--end,
-:host([loading]) a:not(.content--slotted) .icon--start,
-:host([loading]) a:not(.content--slotted) .icon--end {
+:host([loading]) button:not(.content--slotted) .icon--start, :host([loading]) button:not(.content--slotted) .icon--end, :host([loading]) a:not(.content--slotted) .icon--start, :host([loading]) a:not(.content--slotted) .icon--end {
   display: none;
 }
 
-:host([appearance=solid]) button,
-:host([appearance=solid]) a {
+:host([appearance=solid]) button, :host([appearance=solid]) a {
   border-width: 1px;
   border-style: solid;
   border-color: transparent;
 }
 
-:host([appearance=solid][color=blue]) button,
-:host([appearance=solid][color=blue]) a {
-  color: var(--calcite-ui-text-inverse);
+:host([appearance=solid][color=blue]) button, :host([appearance=solid][color=blue]) a {
   background-color: var(--calcite-ui-brand);
+  color: var(--calcite-ui-text-inverse);
 }
-
-:host([appearance=solid][color=blue]) button:hover, :host([appearance=solid][color=blue]) button:focus,
-:host([appearance=solid][color=blue]) a:hover,
-:host([appearance=solid][color=blue]) a:focus {
+:host([appearance=solid][color=blue]) button:hover, :host([appearance=solid][color=blue]) button:focus, :host([appearance=solid][color=blue]) a:hover, :host([appearance=solid][color=blue]) a:focus {
   background-color: var(--calcite-ui-brand-hover);
 }
-
-:host([appearance=solid][color=blue]) button:active,
-:host([appearance=solid][color=blue]) a:active {
+:host([appearance=solid][color=blue]) button:active, :host([appearance=solid][color=blue]) a:active {
   background-color: var(--calcite-ui-brand-press);
 }
-
-:host([appearance=solid][color=blue]) button calcite-loader,
-:host([appearance=solid][color=blue]) a calcite-loader {
+:host([appearance=solid][color=blue]) button calcite-loader, :host([appearance=solid][color=blue]) a calcite-loader {
   color: var(--calcite-ui-text-inverse);
 }
 
-:host([appearance=solid][color=red]) button,
-:host([appearance=solid][color=red]) a {
-  color: var(--calcite-ui-text-inverse);
+:host([appearance=solid][color=red]) button, :host([appearance=solid][color=red]) a {
   background-color: var(--calcite-ui-danger);
+  color: var(--calcite-ui-text-inverse);
 }
-
-:host([appearance=solid][color=red]) button:hover, :host([appearance=solid][color=red]) button:focus,
-:host([appearance=solid][color=red]) a:hover,
-:host([appearance=solid][color=red]) a:focus {
+:host([appearance=solid][color=red]) button:hover, :host([appearance=solid][color=red]) button:focus, :host([appearance=solid][color=red]) a:hover, :host([appearance=solid][color=red]) a:focus {
   background-color: var(--calcite-ui-danger-hover);
 }
-
-:host([appearance=solid][color=red]) button:active,
-:host([appearance=solid][color=red]) a:active {
+:host([appearance=solid][color=red]) button:active, :host([appearance=solid][color=red]) a:active {
   background-color: var(--calcite-ui-danger-press);
 }
-
-:host([appearance=solid][color=red]) button calcite-loader,
-:host([appearance=solid][color=red]) a calcite-loader {
+:host([appearance=solid][color=red]) button calcite-loader, :host([appearance=solid][color=red]) a calcite-loader {
   color: var(--calcite-ui-text-inverse);
 }
 
-:host([appearance=solid][color=neutral]) button,
-:host([appearance=solid][color=neutral]) a {
-  color: var(--calcite-ui-text-1);
+:host([appearance=solid][color=neutral]) button, :host([appearance=solid][color=neutral]) a {
   background-color: var(--calcite-ui-foreground-3);
+  color: var(--calcite-ui-text-1);
 }
-
-:host([appearance=solid][color=neutral]) button:hover, :host([appearance=solid][color=neutral]) button:focus,
-:host([appearance=solid][color=neutral]) a:hover,
-:host([appearance=solid][color=neutral]) a:focus {
+:host([appearance=solid][color=neutral]) button:hover, :host([appearance=solid][color=neutral]) button:focus, :host([appearance=solid][color=neutral]) a:hover, :host([appearance=solid][color=neutral]) a:focus {
   background-color: var(--calcite-ui-foreground-2);
 }
-
-:host([appearance=solid][color=neutral]) button:active,
-:host([appearance=solid][color=neutral]) a:active {
+:host([appearance=solid][color=neutral]) button:active, :host([appearance=solid][color=neutral]) a:active {
   background-color: var(--calcite-ui-foreground-1);
 }
-
-:host([appearance=solid][color=neutral]) button calcite-loader,
-:host([appearance=solid][color=neutral]) a calcite-loader {
+:host([appearance=solid][color=neutral]) button calcite-loader, :host([appearance=solid][color=neutral]) a calcite-loader {
   color: var(--calcite-ui-text-1);
 }
 
-:host([appearance=solid][color=inverse]) button,
-:host([appearance=solid][color=inverse]) a {
+:host([appearance=solid][color=inverse]) button, :host([appearance=solid][color=inverse]) a {
   color: var(--calcite-ui-text-inverse);
   background-color: var(--calcite-ui-inverse);
 }
-
 :host([appearance=solid][color=inverse]) button:hover, :host([appearance=solid][color=inverse]) button:focus,
 :host([appearance=solid][color=inverse]) a:hover,
 :host([appearance=solid][color=inverse]) a:focus {
   background-color: var(--calcite-ui-inverse-hover);
 }
-
 :host([appearance=solid][color=inverse]) button:active,
 :host([appearance=solid][color=inverse]) a:active {
   background-color: var(--calcite-ui-inverse-press);
 }
-
-:host([appearance=solid][color=inverse]) button calcite-loader,
-:host([appearance=solid][color=inverse]) a calcite-loader {
+:host([appearance=solid][color=inverse]) button calcite-loader, :host([appearance=solid][color=inverse]) a calcite-loader {
   color: var(--calcite-ui-text-inverse);
 }
 
-:host([appearance=outline]) button,
-:host([appearance=outline]) a {
-  background-color: var(--calcite-ui-foreground-1);
+:host([appearance=outline]) button, :host([appearance=outline]) a {
   border-width: 1px;
   border-style: solid;
+  background-color: var(--calcite-ui-foreground-1);
   box-shadow: inset 0 0 0 1px transparent;
 }
 
-:host([appearance=outline][color=blue]) button,
-:host([appearance=outline][color=blue]) a {
+:host([appearance=outline][color=blue]) button, :host([appearance=outline][color=blue]) a {
   border-color: var(--calcite-ui-brand);
   color: var(--calcite-ui-brand);
 }
-
-:host([appearance=outline][color=blue]) button:hover,
-:host([appearance=outline][color=blue]) a:hover {
+:host([appearance=outline][color=blue]) button:hover, :host([appearance=outline][color=blue]) a:hover {
   border-color: var(--calcite-ui-brand-hover);
   color: var(--calcite-ui-brand-hover);
   box-shadow: inset 0 0 0 1px var(--calcite-ui-brand-hover);
 }
-
-:host([appearance=outline][color=blue]) button:focus,
-:host([appearance=outline][color=blue]) a:focus {
+:host([appearance=outline][color=blue]) button:focus, :host([appearance=outline][color=blue]) a:focus {
   border-color: var(--calcite-ui-brand);
   color: var(--calcite-ui-brand);
   box-shadow: inset 0 0 0 2px var(--calcite-ui-brand);
 }
-
-:host([appearance=outline][color=blue]) button:active,
-:host([appearance=outline][color=blue]) a:active {
+:host([appearance=outline][color=blue]) button:active, :host([appearance=outline][color=blue]) a:active {
   border-color: var(--calcite-ui-brand-press);
   color: var(--calcite-ui-brand-press);
   box-shadow: inset 0 0 0 2px var(--calcite-ui-brand-press);
 }
-
 :host([appearance=outline][color=blue]) button calcite-loader,
 :host([appearance=outline][color=blue]) a calcite-loader {
   color: var(--calcite-ui-brand);
 }
 
-:host([appearance=outline][color=red]) button,
-:host([appearance=outline][color=red]) a {
+:host([appearance=outline][color=red]) button, :host([appearance=outline][color=red]) a {
   border-color: var(--calcite-ui-danger);
   color: var(--calcite-ui-danger);
 }
-
-:host([appearance=outline][color=red]) button:hover,
-:host([appearance=outline][color=red]) a:hover {
+:host([appearance=outline][color=red]) button:hover, :host([appearance=outline][color=red]) a:hover {
   border-color: var(--calcite-ui-danger-hover);
   color: var(--calcite-ui-danger-hover);
   box-shadow: inset 0 0 0 1px var(--calcite-ui-danger-hover);
 }
-
-:host([appearance=outline][color=red]) button:focus,
-:host([appearance=outline][color=red]) a:focus {
+:host([appearance=outline][color=red]) button:focus, :host([appearance=outline][color=red]) a:focus {
   border-color: var(--calcite-ui-danger);
   color: var(--calcite-ui-danger);
   box-shadow: inset 0 0 0 2px var(--calcite-ui-danger);
 }
-
-:host([appearance=outline][color=red]) button:active,
-:host([appearance=outline][color=red]) a:active {
+:host([appearance=outline][color=red]) button:active, :host([appearance=outline][color=red]) a:active {
   border-color: var(--calcite-ui-danger-press);
   color: var(--calcite-ui-danger-press);
   box-shadow: inset 0 0 0 2px var(--calcite-ui-danger-press);
 }
-
 :host([appearance=outline][color=red]) button calcite-loader,
 :host([appearance=outline][color=red]) a calcite-loader {
   color: var(--calcite-ui-danger);
 }
 
-:host([appearance=outline][color=neutral]) button,
-:host([appearance=outline][color=neutral]) a {
+:host([appearance=outline][color=neutral]) button, :host([appearance=outline][color=neutral]) a {
   color: var(--calcite-ui-text-1);
   border-color: var(--calcite-ui-foreground-3);
 }
-
 :host([appearance=outline][color=neutral]) button:hover,
 :host([appearance=outline][color=neutral]) a:hover {
   box-shadow: inset 0 0 0 1px var(--calcite-ui-foreground-3);
 }
-
 :host([appearance=outline][color=neutral]) button:focus,
 :host([appearance=outline][color=neutral]) a:focus {
   box-shadow: inset 0 0 0 2px var(--calcite-ui-foreground-3);
 }
-
 :host([appearance=outline][color=neutral]) button:active,
 :host([appearance=outline][color=neutral]) a:active {
   box-shadow: inset 0 0 0 2px var(--calcite-ui-foreground-3);
 }
-
-:host([appearance=outline][color=neutral]) button calcite-loader,
-:host([appearance=outline][color=neutral]) a calcite-loader {
+:host([appearance=outline][color=neutral]) button calcite-loader, :host([appearance=outline][color=neutral]) a calcite-loader {
   color: var(--calcite-ui-text-1);
 }
 
-:host([appearance=outline][color=inverse]) button,
-:host([appearance=outline][color=inverse]) a {
+:host([appearance=outline][color=inverse]) button, :host([appearance=outline][color=inverse]) a {
   color: var(--calcite-ui-text-1);
   border-color: var(--calcite-ui-inverse);
 }
-
 :host([appearance=outline][color=inverse]) button:hover,
 :host([appearance=outline][color=inverse]) a:hover {
   border-color: var(--calcite-ui-inverse-hover);
   box-shadow: inset 0 0 0 1px var(--calcite-ui-inverse-hover);
 }
-
 :host([appearance=outline][color=inverse]) button:focus,
 :host([appearance=outline][color=inverse]) a:focus {
   border-color: var(--calcite-ui-inverse);
   box-shadow: inset 0 0 0 2px var(--calcite-ui-inverse);
 }
-
 :host([appearance=outline][color=inverse]) button:active,
 :host([appearance=outline][color=inverse]) a:active {
   border-color: var(--calcite-ui-inverse-press);
   box-shadow: inset 0 0 0 2px var(--calcite-ui-inverse-press);
 }
-
-:host([appearance=outline][color=inverse]) button calcite-loader,
-:host([appearance=outline][color=inverse]) a calcite-loader {
+:host([appearance=outline][color=inverse]) button calcite-loader, :host([appearance=outline][color=inverse]) a calcite-loader {
   color: var(--calcite-ui-text-1);
 }
 
-:host([appearance=clear]) button,
-:host([appearance=clear]) a {
-  background-color: transparent;
+:host([appearance=clear]) button, :host([appearance=clear]) a {
   border-width: 1px;
   border-style: solid;
+  background-color: transparent;
   box-shadow: inset 0 0 0 1px transparent;
 }
 
-:host([appearance=clear][color=blue]) button,
-:host([appearance=clear][color=blue]) a {
+:host([appearance=clear][color=blue]) button, :host([appearance=clear][color=blue]) a {
   border-color: var(--calcite-ui-brand);
   color: var(--calcite-ui-brand);
 }
-
-:host([appearance=clear][color=blue]) button:hover,
-:host([appearance=clear][color=blue]) a:hover {
+:host([appearance=clear][color=blue]) button:hover, :host([appearance=clear][color=blue]) a:hover {
   border-color: var(--calcite-ui-brand-hover);
   color: var(--calcite-ui-brand-hover);
   box-shadow: inset 0 0 0 1px var(--calcite-ui-brand-hover);
 }
-
-:host([appearance=clear][color=blue]) button:focus,
-:host([appearance=clear][color=blue]) a:focus {
+:host([appearance=clear][color=blue]) button:focus, :host([appearance=clear][color=blue]) a:focus {
   border-color: var(--calcite-ui-brand);
   color: var(--calcite-ui-brand);
   box-shadow: inset 0 0 0 2px var(--calcite-ui-brand);
 }
-
-:host([appearance=clear][color=blue]) button:active,
-:host([appearance=clear][color=blue]) a:active {
+:host([appearance=clear][color=blue]) button:active, :host([appearance=clear][color=blue]) a:active {
   border-color: var(--calcite-ui-brand-press);
   color: var(--calcite-ui-brand-press);
   box-shadow: inset 0 0 0 2px var(--calcite-ui-brand-press);
 }
-
 :host([appearance=clear][color=blue]) button calcite-loader,
 :host([appearance=clear][color=blue]) a calcite-loader {
   color: var(--calcite-ui-brand);
 }
 
-:host([appearance=clear][color=red]) button,
-:host([appearance=clear][color=red]) a {
+:host([appearance=clear][color=red]) button, :host([appearance=clear][color=red]) a {
   border-color: var(--calcite-ui-danger);
   color: var(--calcite-ui-danger);
 }
-
-:host([appearance=clear][color=red]) button:hover,
-:host([appearance=clear][color=red]) a:hover {
+:host([appearance=clear][color=red]) button:hover, :host([appearance=clear][color=red]) a:hover {
   border-color: var(--calcite-ui-danger-hover);
   color: var(--calcite-ui-danger-hover);
   box-shadow: inset 0 0 0 1px var(--calcite-ui-danger-hover);
 }
-
-:host([appearance=clear][color=red]) button:focus,
-:host([appearance=clear][color=red]) a:focus {
+:host([appearance=clear][color=red]) button:focus, :host([appearance=clear][color=red]) a:focus {
   border-color: var(--calcite-ui-danger);
   color: var(--calcite-ui-danger);
   box-shadow: inset 0 0 0 2px var(--calcite-ui-danger);
 }
-
-:host([appearance=clear][color=red]) button:active,
-:host([appearance=clear][color=red]) a:active {
+:host([appearance=clear][color=red]) button:active, :host([appearance=clear][color=red]) a:active {
   border-color: var(--calcite-ui-danger-press);
   color: var(--calcite-ui-danger-press);
   box-shadow: inset 0 0 0 2px var(--calcite-ui-danger-press);
 }
-
 :host([appearance=clear][color=red]) button calcite-loader,
 :host([appearance=clear][color=red]) a calcite-loader {
   color: var(--calcite-ui-danger);
 }
 
-:host([appearance=clear][color=neutral]) button,
-:host([appearance=clear][color=neutral]) a {
+:host([appearance=clear][color=neutral]) button, :host([appearance=clear][color=neutral]) a {
   color: var(--calcite-ui-text-1);
   border-color: var(--calcite-ui-foreground-3);
 }
-
 :host([appearance=clear][color=neutral]) button:hover,
 :host([appearance=clear][color=neutral]) a:hover {
   box-shadow: inset 0 0 0 1px var(--calcite-ui-foreground-3);
 }
-
 :host([appearance=clear][color=neutral]) button:focus,
 :host([appearance=clear][color=neutral]) a:focus {
   box-shadow: inset 0 0 0 2px var(--calcite-ui-foreground-3);
 }
-
 :host([appearance=clear][color=neutral]) button:active,
 :host([appearance=clear][color=neutral]) a:active {
   box-shadow: inset 0 0 0 2px var(--calcite-ui-foreground-3);
 }
-
-:host([appearance=clear][color=neutral]) button calcite-loader,
-:host([appearance=clear][color=neutral]) a calcite-loader {
+:host([appearance=clear][color=neutral]) button calcite-loader, :host([appearance=clear][color=neutral]) a calcite-loader {
   color: var(--calcite-ui-text-1);
 }
 
-:host([appearance=clear][color=inverse]) button,
-:host([appearance=clear][color=inverse]) a {
+:host([appearance=clear][color=inverse]) button, :host([appearance=clear][color=inverse]) a {
   color: var(--calcite-ui-text-1);
   border-color: var(--calcite-ui-inverse);
 }
-
 :host([appearance=clear][color=inverse]) button:hover,
 :host([appearance=clear][color=inverse]) a:hover {
   border-color: var(--calcite-ui-inverse-hover);
   box-shadow: inset 0 0 0 1px var(--calcite-ui-inverse-hover);
 }
-
 :host([appearance=clear][color=inverse]) button:focus,
 :host([appearance=clear][color=inverse]) a:focus {
   border-color: var(--calcite-ui-inverse);
   box-shadow: inset 0 0 0 2px var(--calcite-ui-inverse);
 }
-
 :host([appearance=clear][color=inverse]) button:active,
 :host([appearance=clear][color=inverse]) a:active {
   border-color: var(--calcite-ui-inverse-press);
   box-shadow: inset 0 0 0 2px var(--calcite-ui-inverse-press);
 }
-
-:host([appearance=clear][color=inverse]) button calcite-loader,
-:host([appearance=clear][color=inverse]) a calcite-loader {
+:host([appearance=clear][color=inverse]) button calcite-loader, :host([appearance=clear][color=inverse]) a calcite-loader {
   color: var(--calcite-ui-text-1);
 }
 
 :host([appearance=outline][split-child=primary]) button,
 :host([appearance=clear][split-child=primary]) button {
-  border-right-width: 0;
-  border-left-width: 1px;
-}
-
-:host([appearance=outline][split-child=primary]) button.calcite--rtl,
-:host([appearance=clear][split-child=primary]) button.calcite--rtl {
-  border-left-width: 0;
-  border-right-width: 1px;
+  border-inline-end-width: 0;
+  border-inline-start-width: 1px;
 }
 
 :host([appearance=outline][split-child=secondary]) button,
 :host([appearance=clear][split-child=secondary]) button {
-  border-left-width: 0;
-  border-right-width: 1px;
+  border-inline-start-width: 0;
+  border-inline-end-width: 1px;
 }
 
-:host([appearance=outline][split-child=secondary]) button.calcite--rtl,
-:host([appearance=clear][split-child=secondary]) button.calcite--rtl {
-  border-right-width: 0;
-  border-left-width: 1px;
-}
-
-:host([appearance=transparent]:not(.enable-editing-button)) button,
-:host([appearance=transparent]:not(.enable-editing-button)) a {
+:host([appearance=transparent]:not(.enable-editing-button)) button, :host([appearance=transparent]:not(.enable-editing-button)) a {
   background-color: transparent;
 }
-
 :host([appearance=transparent]:not(.enable-editing-button)) button:hover, :host([appearance=transparent]:not(.enable-editing-button)) button:focus,
 :host([appearance=transparent]:not(.enable-editing-button)) a:hover,
 :host([appearance=transparent]:not(.enable-editing-button)) a:focus {
   background-color: var(--calcite-button-transparent-hover);
 }
-
 :host([appearance=transparent]:not(.enable-editing-button)) button:active,
 :host([appearance=transparent]:not(.enable-editing-button)) a:active {
   background-color: var(--calcite-button-transparent-press);
@@ -722,22 +561,18 @@
 :host([appearance=transparent][color=blue]) a {
   color: var(--calcite-ui-brand);
 }
-
 :host([appearance=transparent][color=blue]) button:hover,
 :host([appearance=transparent][color=blue]) a:hover {
   color: var(--calcite-ui-brand-hover);
 }
-
 :host([appearance=transparent][color=blue]) button:focus,
 :host([appearance=transparent][color=blue]) a:focus {
   color: var(--calcite-ui-brand);
 }
-
 :host([appearance=transparent][color=blue]) button:active,
 :host([appearance=transparent][color=blue]) a:active {
   color: var(--calcite-ui-brand-press);
 }
-
 :host([appearance=transparent][color=blue]) button calcite-loader,
 :host([appearance=transparent][color=blue]) a calcite-loader {
   color: var(--calcite-ui-brand);
@@ -747,47 +582,39 @@
 :host([appearance=transparent][color=red]) a {
   color: var(--calcite-ui-danger);
 }
-
 :host([appearance=transparent][color=red]) button:hover,
 :host([appearance=transparent][color=red]) a:hover {
   color: var(--calcite-ui-danger-hover);
 }
-
 :host([appearance=transparent][color=red]) button:focus,
 :host([appearance=transparent][color=red]) a:focus {
   color: var(--calcite-ui-danger);
 }
-
 :host([appearance=transparent][color=red]) button:active,
 :host([appearance=transparent][color=red]) a:active {
   color: var(--calcite-ui-danger-press);
 }
-
 :host([appearance=transparent][color=red]) button calcite-loader,
 :host([appearance=transparent][color=red]) a calcite-loader {
   color: var(--calcite-ui-danger);
 }
 
-:host([appearance=transparent][color=neutral]:not(.cancel-editing-button)) button,
-:host([appearance=transparent][color=neutral]:not(.cancel-editing-button)) a,
-:host([appearance=transparent][color=neutral]:not(.cancel-editing-button)) calcite-loader {
+:host([appearance=transparent][color=neutral]:not(.cancel-editing-button)) button, :host([appearance=transparent][color=neutral]:not(.cancel-editing-button)) a, :host([appearance=transparent][color=neutral]:not(.cancel-editing-button)) calcite-loader {
   color: var(--calcite-ui-text-1);
 }
 
 :host([appearance=transparent][color=neutral].cancel-editing-button) button {
-  color: var(--calcite-ui-text-3);
   border-top-width: 1px;
-  border-top-color: var(--calcite-ui-border-input);
   border-bottom-width: 1px;
+  color: var(--calcite-ui-text-3);
+  border-top-color: var(--calcite-ui-border-input);
   border-bottom-color: var(--calcite-ui-border-input);
   border-bottom-style: solid;
   border-top-style: solid;
 }
-
 :host([appearance=transparent][color=neutral].cancel-editing-button) button:not(.content--slotted) {
   --calcite-button-padding-y: 0;
 }
-
 :host([appearance=transparent][color=neutral].cancel-editing-button) button:hover {
   color: var(--calcite-ui-text-1);
 }
@@ -802,14 +629,11 @@
   outline-offset: -2px;
 }
 
-:host([appearance=transparent][color=inverse]) button,
-:host([appearance=transparent][color=inverse]) a,
-:host([appearance=transparent][color=inverse]) calcite-loader {
+:host([appearance=transparent][color=inverse]) button, :host([appearance=transparent][color=inverse]) a, :host([appearance=transparent][color=inverse]) calcite-loader {
   color: var(--calcite-ui-text-inverse);
 }
 
-:host([scale=s]) button.content--slotted,
-:host([scale=s]) a.content--slotted {
+:host([scale=s]) button.content--slotted, :host([scale=s]) a.content--slotted {
   font-size: var(--calcite-font-size--2);
   line-height: 1rem;
 }
@@ -860,9 +684,9 @@
 :host([scale=s]) a:not(.content--slotted) {
   --calcite-button-padding-x: 0.125rem;
   --calcite-button-padding-y: 3px;
+  width: 1.5rem;
   font-size: var(--calcite-font-size-0);
   line-height: 1.25rem;
-  width: 1.5rem;
   min-height: 1.5rem;
 }
 
@@ -875,9 +699,9 @@
 :host([scale=m]) a:not(.content--slotted) {
   --calcite-button-padding-x: 0.125rem;
   --calcite-button-padding-y: 7px;
+  width: 2rem;
   font-size: var(--calcite-font-size-0);
   line-height: 1.25rem;
-  width: 2rem;
   min-height: 2rem;
 }
 
@@ -890,9 +714,9 @@
 :host([scale=l]) a:not(.content--slotted) {
   --calcite-button-padding-x: 0.125rem;
   --calcite-button-padding-y: 9px;
+  width: 2.75rem;
   font-size: var(--calcite-font-size-0);
   line-height: 1.25rem;
-  width: 2.75rem;
   min-height: 2.75rem;
 }
 
@@ -904,9 +728,9 @@
 :host([scale=s][icon-start][icon-end]) button:not(.content--slotted),
 :host([scale=s][icon-start][icon-end]) a:not(.content--slotted) {
   --calcite-button-padding-x: 23px;
+  height: 1.5rem;
   font-size: var(--calcite-font-size-0);
   line-height: 1.25rem;
-  height: 1.5rem;
 }
 
 :host([scale=s][icon-start][icon-end][appearance=transparent]) button:not(.content--slotted),
@@ -917,9 +741,9 @@
 :host([scale=m][icon-start][icon-end]) button:not(.content--slotted),
 :host([scale=m][icon-start][icon-end]) a:not(.content--slotted) {
   --calcite-button-padding-x: 2rem;
+  height: 2rem;
   font-size: var(--calcite-font-size-0);
   line-height: 1.25rem;
-  height: 2rem;
 }
 
 :host([scale=m][icon-start][icon-end][appearance=transparent]) button:not(.content--slotted),
@@ -930,11 +754,10 @@
 :host([scale=l][icon-start][icon-end]) button:not(.content--slotted),
 :host([scale=l][icon-start][icon-end]) a:not(.content--slotted) {
   --calcite-button-padding-x: 43px;
+  height: 2.75rem;
   font-size: var(--calcite-font-size-0);
   line-height: 1.25rem;
-  height: 2.75rem;
 }
-
 :host([scale=l][icon-start][icon-end]) button:not(.content--slotted) .icon--start + .icon--end,
 :host([scale=l][icon-start][icon-end]) a:not(.content--slotted) .icon--start + .icon--end {
   margin-inline-start: 1rem;