.zui-button {
  color: #323233;
  background-color: #fff;
  padding: $h-gap-md $v-gap-md;
  font-size: $font-md;
  cursor: pointer;
  transition: all 150ms;
  display: flex;
  align-items: center;
  justify-content: center;
	border-radius: 10upx;
	position: relative;
	&::after {
		padding: 0;
		margin: 0;
		border: none;
		content: "";
		pointer-events: none; /* 防止点击触发 */
		box-sizing: border-box;
		position: absolute;
		width: 200%;
		height: 200%;
		left: 0;
		top: 0;
		border: 1upx solid $color-border;
		border-radius: 20upx;
		transform: scale(0.5);
		transform-origin: 0 0;
	}
	&.sm {
		padding: $h-gap-sm $v-gap-sm;
		font-size: $font-sm;
	}
	&.lg {
		padding: $h-gap-lg $v-gap-lg;
		font-size: $font-lg;
	}
	&.active {
		background-color: $bg-active;
		&, &::after {
			border-color: $bg-active;
		}
	}
	&.primary {
		background-color: $color-primary;
		color: #FFF;
		&.active {
			background-color: darken($color-primary, 3%);
			&, &::after {
				border-color: darken($color-primary, 3%);
			}
		}
		&, &::after {
			border-color: $color-primary;
		}
	}
	&.secondary {
		background-color: lighten($color-primary, 40%);
		color: $color-primary;
		&.active {
			background-color: lighten($color-primary, 30%);
			color: darken($color-primary, 3%);
			&, &::after {
				border-color: lighten($color-primary, 30%);
			}
		}
		&, &::after {
			border-color: lighten($color-primary, 40%);
		}
	}
  &.plain {
    &.primary {
      color: $color-primary;
      background-color: transparent;
      &.active {
      	background-color: rgba($color-primary, 0.1);
      }
    }
    &.disabled {
      background-color: rgba($bg-disabled, 0.1);
    	color: $color-disabled;
    	cursor: not-allowed;
    	&.active {
    		color: $color-disabled;
        background-color: rgba($bg-disabled, 0.1);
    		&, &::after {
    			border-color: $bg-disabled;
    		}
    	}
    	&, &::after {
    		border-color: $bg-disabled;
    	}
    }
  }
	&.link {
		padding: $h-gap-sm $v-gap-sm;
		background: inherit;
		border: inherit;
		color: $color-primary;
		&.active {
			color: darken($color-primary, 5%);
		}
    &::after {
      display: none;
    }
	}
	&.disabled {
		background-color: $bg-disabled;
		color: $color-disabled;
		cursor: not-allowed;
		&.active {
			background-color: $bg-disabled;
			&, &::after {
				border-color: $bg-disabled;
			}
		}
		&, &::after {
			border-color: $bg-disabled;
		}
	}
	&.round {
		border-radius: 48upx;
		&::after {
			border-radius: 96upx;
		}
	}
	&.square {
		border-radius: 0upx;
		&::after {
			border-radius: 0;
		}
	}
}