ion-button { margin: var(--mdl-spacing-1) var(--mdl-spacing-2); white-space: normal; line-height: 120%; core-format-text { display: contents; line-height: 120%; } &.ion-text-nowrap { @include ellipsis(); & > * { @include ellipsis(); } core-format-text { display: block; } } ion-spinner { --color: inherit !important; } ion-spinner[slot=start], img[slot=start] { @include margin-horizontal(-0.3em, 0.3em); } ion-spinner[slot=end], img[slot=end] { @include margin-horizontal(-0.3em, 0.3em); } ion-spinner[slot] { width: 20px; color: inherit; } &.button-disabled { opacity: var(--mdl-button-disabled-opacity) !important; } &.button-outline { --border-width: var(--core-input-border-width); --border-color: var(--core-input-stroke); --background: var(--core-input-background); --color: var(--core-input-text); --ion-color-primary: var(--core-input-text); &.ios { --color-activated: var(--contrast-background); } } &.button-solid { --box-shadow: none; } &.button-has-icon-only { margin: 2px; } &:not(.button-has-icon-only):not(.button-small) > ion-icon { min-width: 20px; } &.button.button-clear.button-has-icon-only { --border-radius: var(--mdl-shape-borderRadius-xl); } &.button.button-clear { --color: var(--core-input-text); --ion-color-primary: var(--core-input-text); } &.button.button-solid, &.button.button-outline { --border-radius: var(--core-input-radius); } .select-icon { margin: var(--icon-margin); width: 19px; height: 19px; position: relative; .select-icon-inner { left: 5px; top: 50%; margin-top: -2px; position: absolute; width: 0px; height: 0px; color: currentcolor; pointer-events: none; border-top: 5px solid; border-right: 5px solid transparent; border-left: 5px solid transparent; } } }