semi-design/packages/semi-foundation/button/iconButton.scss

@import "./variables.scss";
@import "../keyframes/rotate.scss";

$module: #{$prefix}-button;

.#{$module} {
    &.#{$module}-with-icon {
        display: inline-flex;
        align-items: center;

        .#{$module}-content {
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }

    &.#{$module}-loading {
        pointer-events: none;
        cursor: not-allowed;

        .#{$module}-content {

            &>svg {
                width: 16px;
                height: 16px;
                animation: .6s linear infinite #{$prefix}-animation-rotate;
            }
        }
    }

    &.#{$module}-with-icon-only {
        padding-left: $spacing-button_iconOnly_default-paddingLeft;
        padding-right: $spacing-button_iconOnly_default-paddingRight;
        padding-top: $spacing-button_iconOnly_default-paddingTop;
        padding-bottom: $spacing-button_iconOnly_default-paddingRight;
        justify-content: center;
        align-items: center;

        &.#{$module}-size {

            &-small {
                padding-left: $spacing-button_iconOnly_small-paddingLeft;
                padding-right: $spacing-button_iconOnly_small-paddingRight;
                padding-top: $spacing-button_iconOnly_small-paddingTop;
                padding-bottom: $spacing-button_iconOnly_small-paddingBottom;
            }

            &-large {
                padding-left: $spacing-button_iconOnly_large-paddingLeft;
                padding-right: $spacing-button_iconOnly_large-paddingRight;
                padding-top: $spacing-button_iconOnly_large-paddingTop;
                padding-bottom: $spacing-button_iconOnly_large-paddingBottom;
            }
        }
    }

    &-content {

        &-left {
            margin-right: $spacing-button_iconOnly_content-marginRight;
        }

        &-right {
            margin-left: $spacing-button_iconOnly_content-marginLeft;
        }
    }
}

@import "./rtl.scss";