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

@import './animation.scss';
@import './variables.scss';
@import './splitButtonGroup.scss';

$module: #{$prefix}-button;

.#{$module} {
    @include shadow-0;
    @include font-size-regular;
    height: $height-button_default;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    cursor: pointer;
    user-select: none;
    border: $width-button-border $color-button_primary-border-default solid;
    border-radius: $radius-button;
    padding-left: $spacing-button_default-paddingLeft;
    padding-right: $spacing-button_default-paddingRight;
    padding-top: $spacing-button_default-paddingTop;
    padding-bottom: $spacing-button_default-paddingTop;
    font-weight: $font-button-fontWeight;
    outline: none;
    vertical-align: middle;
    white-space: nowrap;

    // the specificity of `.#{$module}:focus-visible`  may lower than `reset.css` default `focus-visible` style
    // so we add a class at the same level
    &.#{$module}-primary,
    &.#{$module}-secondary,
    &.#{$module}-tertiary,
    &.#{$module}-warning,
    &.#{$module}-danger {
        &:focus-visible {
            outline: $width-button-outline solid $color-button_primary-outline-focus;
        }
    }

    &-danger {
        background-color: $color-button_danger-bg-default;
        color: $color-button_danger-text-default;
      transition: background-color $transition_duration-button_danger-bg $transition_function-button_danger-bg $transition_delay-button_danger-bg,
      border $transition_duration-button_danger-border $transition_function-button_danger-border $transition_delay-button_danger-border;
      transform: scale($transform-scale-button_danger);


        &:hover {
            background-color: $color-button_danger-bg-hover;
        }
        &:active {
            background-color: $color-button_danger-bg-active;
        }
        &.#{$module}-light,
        &.#{$module}-borderless {
            color: $color-button_danger_borderless-text-default;
        }
        &:not(.#{$module}-borderless):not(.#{$module}-light):focus-visible {
            outline: $width-button-outline solid $color-button_danger-outline-focus;
        }
    }
    &-warning {
        background-color: $color-button_warning-bg-default;
        color: $color-button_warning-text-default;
      transition: background-color $transition_duration-button_warning-bg $transition_function-button_warning-bg $transition_delay-button_warning-bg,
      border $transition_duration-button_warning-border $transition_function-button_warning-border $transition_delay-button_warning-border;
      transform:scale($transform_scale-button_warning);

        &:hover {
            background-color: $color-button_warning-bg-hover;
        }
        &:active {
            background-color: $color-button_warning-bg-active;
        }
        &.#{$module}-light,
        &.#{$module}-borderless {
            color: $color-button_warning_borderless-text-default;
        }
        &:not(.#{$module}-borderless):not(.#{$module}-light):focus-visible {
            outline: $width-button-outline solid $color-button_warning-outline-focus;
        }
    }
    &-tertiary {
        background-color: $color-button_tertiary-bg-default;
        color: $color-button_tertiary-text-default;
      transition: background-color $transition_duration-button_tertiary-bg $transition_function-button_tertiary-bg $transition_delay-button_tertiary-bg,
      border $transition_duration-button_tertiary-border $transition_function-button_tertiary-border $transition_delay-button_tertiary-border;
      transform:scale($transform_scale_button_tertiary);

        &:hover {
            background-color: $color-button_tertiary-bg-hover;
        }
        &:active {
            background-color: $color-button_tertiary-bg-active;
        }
        &.#{$module}-light,
        &.#{$module}-borderless {
            color: $color-button_tertiary_solid-text-default;
        }
    }
    &-primary {
        background-color: $color-button_primary-bg-default;
        color: $color-button_primary-text-default;
        transition: background-color $transition_duration-button_primary-bg $transition_function-button_primary-bg $transition_delay-button_primary-bg,
        border $transition_duration-button_primary-border $transition_function-button_primary-border $transition_delay-button_primary-border;;
      transform:scale($transform_scale-button_primary);

        &:not(.#{$module}-borderless):not(.#{$module}-light):hover {
            background-color: $color-button_primary-bg-hover;
        }
        &:not(.#{$module}-borderless):not(.#{$module}-light):active {
            background-color: $color-button_primary-bg-active;
        }

        &.#{$module}-light,
        &.#{$module}-borderless {
            color: $color-button_primary_borderless-text-default;
        }
    }
    &-secondary {
        background-color: $color-button_secondary-bg-default;
        outline-color: $color-button_secondary-border-default;
        color: $color-button_secondary-text-default;
      transition: background-color $transition_duration-button_secondary-bg $transition_function-button_secondary-bg $transition_delay-button_secondary-bg,
      border $transition_duration-button_secondary-border $transition_function-button_secondary-border $transition_delay-button_secondary-border;
      transform:scale($transform_scale-button_secondary);

        &:hover {
            background-color: $color-button_secondary-bg-hover;
        }
        &:active {
            background-color: $color-button_secondary-bg-active;
        }

        &.#{$module}-light,
        &.#{$module}-borderless {
            color: $color-button_secondary_borderless-text-default;
        }
    }
    &-disabled {
        color: $color-button_disabled_solid-text-default;
        background-color: $color-button_disabled-bg-default;
        &:not(.#{$module}-borderless):not(.#{$module}-light):hover {
            color: $color-button_disabled-text-hover;
            background-color: $color-button_disabled-bg-hover;
        }
        cursor: not-allowed;

        &.#{$module}-light,
        &.#{$module}-borderless {
            color: $color-button_disabled-text-default;
        }
    }
    &-borderless {
        background-color: transparent;
        border: $width-button_borderless-border $color-button_borderless-border-default solid;
      transition:background-color $transition_duration-button_borderless-bg $transition_function-button_borderless-bg $transition_delay-button_borderless-bg;
      transform:scale($transform_scale-button_borderless);

        &:not(.#{$module}-disabled):hover {
            background-color: $color-button_borderless-bg-hover;
            border: $width-button_borderless-border $color-button_borderless-border-hover solid;
        }
        &:not(.#{$module}-disabled):active {
            background-color: $color-button_borderless-bg-active;
            border: $width-button_borderless-border $color-button_borderless-border-active solid;
        }
    }

    &-light {
        background-color: $color-button_light-bg-default;
        border: $width-button_light-border $color-button_light-border-default solid;
      transition: background-color $transition_duration-button_light-bg $transition_function-button_light-bg $transition_delay-button_light-bg,
      border $transition_duration-button_light-border $transition_function-button_light-border $transition_delay-button_light-border;
      transform:scale($transform_scale-button_light);

        &:not(.#{$module}-disabled):hover {
            background-color: $color-button_light-bg-hover;
            border: $width-button_light-border $color-button_light-border-hover solid;
        }
        &:not(.#{$module}-disabled):active {
            background-color: $color-button_light-bg-active;
            border: $width-button_light-border $color-button_light-border-active solid;
        }
    }
    &-size-small {
        height: $height-button_small;
        padding-top: $spacing-button_small-paddingTop;
        padding-bottom: $spacing-button_small-paddingBottom;
        padding-left: $spacing-button_small-paddingLeft;
        padding-right: $spacing-button_small-paddingRight;
    }
    &-size-large {
        height: $height-button_large;
        padding-top: $spacing-button_large-paddingTop;
        padding-bottom: $spacing-button_large-paddingBottom;
        padding-left: $spacing-button_large-paddingLeft;
        padding-right: $spacing-button_large-paddingRight;
    }
    &-block {
        width: 100%;
    }

    &-group {
        display: flex;
        flex-wrap: wrap;

        & > .#{$module} {
            margin: 0;
            padding-left: 0;
            padding-right: 0;
            border-radius: 0;

            .#{$module}-content {
                padding-left: $spacing-button_default-paddingLeft;
                padding-right: $spacing-button_default-paddingRight;
            }

            &-size-large {
                .#{$module}-content {
                    padding-left: $spacing-button_large-paddingLeft;
                    padding-right: $spacing-button_large-paddingRight;
                }
            }

            &-size-small {
                .#{$module}-content {
                    padding-left: $spacing-button_small-paddingLeft;
                    padding-right: $spacing-button_small-paddingRight;
                }
            }

            &.#{$module}-with-icon-only {
                padding-left: 0;
                padding-right: 0;

                .#{$module}-content {
                    padding-left: $spacing-button_iconOnly_default-paddingLeft;
                    padding-right: $spacing-button_iconOnly_default-paddingRight;
                }

                &.#{$module}-size {
                    &-small {
                        .#{$module}-content {
                            padding-left: $spacing-button_iconOnly_small-paddingLeft;
                            padding-right: $spacing-button_iconOnly_small-paddingRight;
                        }
                    }

                    &-large {
                        .#{$module}-content {
                            padding-left: $spacing-button_iconOnly_large-paddingLeft;
                            padding-right: $spacing-button_iconOnly_large-paddingRight;
                        }
                    }
                }
            }

            &:first-child {
                border-top-left-radius: $radius-button_group;
                border-bottom-left-radius: $radius-button_group;
            }
            &:last-child {
                border-top-right-radius: $radius-button_group;
                border-bottom-right-radius: $radius-button_group;
            }
        }

        &-line {
            display: inline-flex;
            align-items: center;
            background-color: $color-button_group-border-default;

            &-primary {
                background-color: $color-button_primary-bg-default;
            }
            &-secondary {
                background-color: $color-button_secondary-bg-default;
            }
            &-tertiary {
                background-color: $color-button_tertiary-bg-default;
            }
            &-warning {
                background-color: $color-button_warning-bg-default;
            }
            &-danger {
                background-color: $color-button_danger-bg-default;
            }
            &-disabled {
                background-color: $color-button_disabled-bg-default;
            }
            &-light {
                background-color: $color-button_light-bg-default;
            }
            &-borderless {
                background-color: transparent;
            }

            &::before {
                display: block;
                content: '';
                width: $width-button_group-border;
                height: $height-button_group_line_default;
                background-color: $color-button_group-border-default;
            }
        }
    }
}

@import './rtl.scss';