%button { position: relative; } %button .progress.indeterminate { position: absolute; top: 50%; left: 50%; margin-left: -12px; margin-top: -12px; } %button:disabled .progress + * { visibility: hidden; } %button:empty { padding-right: 0 !important; padding-left: 18px !important; margin-right: 5px; } %button:empty::before { left: 1px; } %button:not(:empty) { display: inline-flex; text-align: center; justify-content: center; align-items: center; padding: calc(0.5em - 1px) calc(2.2em - 1px); min-width: 100px; } %button:not(:last-child) { margin-right: 8px; } %button-compact { padding-top: calc(0.4em - 1px) !important; padding-bottom: calc(0.4em - 1px) !important; } %copy-button:empty { padding: 5px !important; margin-right: 0; margin-top: -5px; } %copy-button:not(:empty)::before { margin-right: 4px; } %internal-button { padding: 0.9em 1em; text-align: center; display: inline-block; box-sizing: border-box; } %split-button { @extend %secondary-button; padding: 0 8px !important; position: relative; height: 100%; } %split-button::after { margin-left: 16px; } %split-button::before { @extend %as-pseudo; height: 16px; } %sort-button { @extend %button; height: 35px !important; }