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;
        }
    }
}