maxit-cli 0.1.0

package/registry/components/button/button.wxss

@@ -0,0 +1,775 @@
+@import '../common/style/index.wxss';
+
+.o-button--size-extra-small {
+    font: var(--o-button-extra-small-font,var(--o-font-mark-medium,600 28rpx / 44rpx var(--o-font-family,Roboto,PingFang SC,Microsoft YaHei,Arial)));
+    padding-left: var(--o-button-extra-small-padding-horizontal,var(--o-spacer,16rpx));
+    padding-right: var(--o-button-extra-small-padding-horizontal,var(--o-spacer,16rpx));
+    height: var(--o-button-extra-small-height,56rpx);
+}
+
+.o-button--size-extra-small .o-button__icon {
+    font-size: var(--o-button-extra-small-icon-size,36rpx);
+}
+
+.o-button--size-small {
+    font: var(--o-button-small-font,var(--o-font-mark-medium,600 28rpx / 44rpx var(--o-font-family,Roboto,PingFang SC,Microsoft YaHei,Arial)));
+    padding-left: var(--o-button-small-padding-horizontal,var(--o-spacer-1,24rpx));
+    padding-right: var(--o-button-small-padding-horizontal,var(--o-spacer-1,24rpx));
+    height: var(--o-button-small-height,64rpx);
+}
+
+.o-button--size-small .o-button__icon {
+    font-size: var(--o-button-small-icon-size,36rpx);
+}
+
+.o-button--size-medium {
+    font: var(--o-button-medium-font,var(--o-font-mark-large,600 32rpx / 48rpx var(--o-font-family,Roboto,PingFang SC,Microsoft YaHei,Arial)));
+    padding-left: var(--o-button-medium-padding-horizontal,var(--o-spacer-2,32rpx));
+    padding-right: var(--o-button-medium-padding-horizontal,var(--o-spacer-2,32rpx));
+    height: var(--o-button-medium-height,80rpx);
+}
+
+.o-button--size-medium .o-button__icon {
+    font-size: var(--o-button-medium-icon-size,40rpx);
+}
+
+.o-button--size-large {
+    font: var(--o-button-large-font,var(--o-font-mark-large,600 32rpx / 48rpx var(--o-font-family,Roboto,PingFang SC,Microsoft YaHei,Arial)));
+    padding-left: var(--o-button-large-padding-horizontal,40rpx);
+    padding-right: var(--o-button-large-padding-horizontal,40rpx);
+    height: var(--o-button-large-height,96rpx);
+}
+
+.o-button--size-large .o-button__icon {
+    font-size: var(--o-button-large-icon-size,48rpx);
+}
+
+.o-button--default {
+    color: var(--o-button-default-color,var(--o-text-color-primary,var(--o-font-gray-1,#1c1b1f)));
+    background-color: var(--o-button-default-bg-color,var(--o-bg-color-component,var(--o-gray-color-3,#dddddd)));
+    border-color: var(--o-button-default-border-color,var(--o-bg-color-component,var(--o-gray-color-3,#dddddd)));
+}
+
+.o-button--default::after {
+    border-width: var(--o-button-border-width,4rpx);
+    border-color: var(--o-button-default-border-color,var(--o-bg-color-component,var(--o-gray-color-3,#dddddd)));
+}
+
+.o-button--default.o-button--hover {
+    z-index: 0;
+}
+
+.o-button--default.o-button--hover,
+.o-button--default.o-button--hover::after {
+    background-color: var(--o-button-default-active-bg-color,var(--o-bg-color-component-active,var(--o-gray-color-6,#a6a6a6)));
+    border-color: var(--o-button-default-active-border-color,var(--o-bg-color-component-active,var(--o-gray-color-6,#a6a6a6)));
+}
+
+.o-button--default.o-button--disabled {
+    color: var(--o-button-default-disabled-color,var(--o-text-color-disabled,var(--o-font-gray-4,rgba(0,0,0,.26))));
+    background-color: var(--o-button-default-disabled-bg,var(--o-bg-color-component-disabled,var(--o-gray-color-2,#eee)));
+}
+
+.o-button--default.o-button--disabled,
+.o-button--default.o-button--disabled::after {
+    border-color: var(--o-button-default-disabled-border-color,var(--o-bg-color-component-disabled,var(--o-gray-color-2,#eee)));
+}
+
+.o-button--primary {
+    color: var(--o-button-primary-color,#000);
+    background-color: var(--o-button-primary-bg-color,var(--o-brand-color,var(--o-primary-color-7,#f16e00)));
+    border-color: var(--o-button-primary-border-color,var(--o-brand-color,var(--o-primary-color-7,#f16e00)));
+}
+
+.o-button--primary::after {
+    border-width: var(--o-button-border-width,4rpx);
+    border-color: var(--o-button-primary-border-color,var(--o-brand-color,var(--o-primary-color-7,#f16e00)));
+}
+
+.o-button--primary.o-button--hover {
+    z-index: 0;
+}
+
+.o-button--primary.o-button--hover,
+.o-button--primary.o-button--hover::after {
+    background-color: var(--o-button-primary-active-bg-color,var(--o-brand-color-active,var(--o-primary-color-8,#cd5e00)));
+    border-color: var(--o-button-primary-active-border-color,var(--o-brand-color-active,var(--o-primary-color-8,#cd5e00)));
+}
+
+.o-button--primary.o-button--disabled {
+    color: var(--o-button-primary-disabled-color,var(--o-text-color-anti,var(--o-font-white-1,#fff)));
+    background-color: var(--o-button-primary-disabled-bg,var(--o-brand-color-disabled,var(--o-primary-color-3,#f9c599)));
+}
+
+.o-button--primary.o-button--disabled,
+.o-button--primary.o-button--disabled::after {
+    border-color: var(--o-button-primary-disabled-border-color,var(--o-brand-color-disabled,var(--o-primary-color-3,#f9c599)));
+}
+
+.o-button--light {
+    color: var(--o-button-light-color,var(--o-brand-color,var(--o-primary-color-7,#f16e00)));
+    background-color: var(--o-button-light-bg-color,var(--o-brand-color-light,var(--o-primary-color-1,#fef3eb)));
+    border-color: var(--o-button-light-border-color,var(--o-brand-color-light,var(--o-primary-color-1,#fef3eb)));
+}
+
+.o-button--light::after {
+    border-width: var(--o-button-border-width,4rpx);
+    border-color: var(--o-button-light-border-color,var(--o-brand-color-light,var(--o-primary-color-1,#fef3eb)));
+}
+
+.o-button--light.o-button--hover {
+    z-index: 0;
+}
+
+.o-button--light.o-button--hover,
+.o-button--light.o-button--hover::after {
+    background-color: var(--o-button-light-active-bg-color,var(--o-brand-color-light-active,var(--o-primary-color-2,#fce2cc)));
+    border-color: var(--o-button-light-active-border-color,var(--o-brand-color-light-active,var(--o-primary-color-2,#fce2cc)));
+}
+
+.o-button--light.o-button--disabled {
+    color: var(--o-button-light-disabled-color,var(--o-brand-color-disabled,var(--o-primary-color-3,#f9c599)));
+    background-color: var(--o-button-light-disabled-bg,var(--o-brand-color-light,var(--o-primary-color-1,#fef3eb)));
+}
+
+.o-button--light.o-button--disabled,
+.o-button--light.o-button--disabled::after {
+    border-color: var(--o-button-light-disabled-border-color,var(--o-brand-color-light,var(--o-primary-color-1,#fef3eb)));
+}
+
+.o-button--danger {
+    color: var(--o-button-danger-color,var(--o-text-color-anti,var(--o-font-white-1,#fff)));
+    background-color: var(--o-button-danger-bg-color,var(--o-error-color,var(--o-error-color-6,#cd3c14)));
+    border-color: var(--o-button-danger-border-color,var(--o-error-color,var(--o-error-color-6,#cd3c14)));
+}
+
+.o-button--danger::after {
+    border-width: var(--o-button-border-width,4rpx);
+    border-color: var(--o-button-danger-border-color,var(--o-error-color,var(--o-error-color-6,#cd3c14)));
+}
+
+.o-button--danger.o-button--hover {
+    z-index: 0;
+}
+
+.o-button--danger.o-button--hover,
+.o-button--danger.o-button--hover::after {
+    background-color: var(--o-button-danger-active-bg-color,var(--o-error-color-active,var(--o-error-color-7,#ad352f)));
+    border-color: var(--o-button-danger-active-border-color,var(--o-error-color-active,var(--o-error-color-7,#ad352f)));
+}
+
+.o-button--danger.o-button--disabled {
+    color: var(--o-button-danger-disabled-color,var(--o-font-white-1,#fff));
+    background-color: var(--o-button-danger-disabled-bg,var(--o-error-color-3,#ffb9b0));
+}
+
+.o-button--danger.o-button--disabled,
+.o-button--danger.o-button--disabled::after {
+    border-color: var(--o-button-danger-disabled-border-color,var(--o-error-color-3,#ffb9b0));
+}
+
+.o-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    white-space: nowrap;
+    text-align: center;
+    background-image: none;
+    transition: all .3s;
+    touch-action: manipulation;
+    border-radius: var(--o-button-border-radius,var(--o-radius-default,12rpx));
+    outline: 0;
+    vertical-align: top;
+    box-sizing: border-box;
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+    -webkit-user-select: none;
+    user-select: none;
+    -webkit-appearance: none;
+}
+
+.o-button:not([size=mini]) {
+    width: auto;
+    margin-left: 0;
+    margin-right: 0;
+}
+
+.o-button::after {
+    border-radius: calc(var(--o-button-border-radius,var(--o-radius-default,12rpx)) * 2);
+}
+
+.o-button--text {
+    color: var(--o-button-default-color,var(--o-text-color-primary,var(--o-font-gray-1,#1c1b1f)));
+    background-color: transparent;
+}
+
+.o-button--text,
+.o-button--text::after {
+    border: 0;
+}
+
+.o-button--text.o-button--hover,
+.o-button--text.o-button--hover::after {
+    background-color: var(--o-button-default-text-active-bg-color,var(--o-bg-color-container-active,var(--o-gray-color-3,#dddddd)));
+}
+
+.o-button--text.o-button--primary {
+    color: var(--o-button-primary-text-color,var(--o-brand-color,var(--o-primary-color-7,#f16e00)));
+    background-color: transparent;
+}
+
+.o-button--text.o-button--primary.o-button--hover,
+.o-button--text.o-button--primary.o-button--hover::after {
+    background-color: var(--o-button-primary-text-active-bg-color,var(--o-bg-color-container-active,var(--o-gray-color-3,#dddddd)));
+}
+
+.o-button--text.o-button--primary.o-button--disabled {
+    color: var(--o-button-primary-text-disabled-color,var(--o-brand-color-disabled,var(--o-primary-color-3,#f9c599)));
+    background-color: var(--o-bg-color-container,var(--o-font-white-1,#fff));
+}
+
+.o-button--text.o-button--danger {
+    color: var(--o-button-danger-text-color,var(--o-error-color,var(--o-error-color-6,#cd3c14)));
+    background-color: transparent;
+}
+
+.o-button--text.o-button--danger.o-button--hover,
+.o-button--text.o-button--danger.o-button--hover::after {
+    background-color: var(--o-button-danger-text-active-bg-color,var(--o-bg-color-container-active,var(--o-gray-color-3,#dddddd)));
+}
+
+.o-button--text.o-button--danger.o-button--disabled {
+    color: var(--o-button-danger-text-disabled-color,var(--o-button-danger-disabled-color,var(--o-font-white-1,#fff)));
+    background-color: var(--o-bg-color-container,var(--o-font-white-1,#fff));
+}
+
+.o-button--text.o-button--light {
+    color: var(--o-button-light-text-color,var(--o-brand-color,var(--o-primary-color-7,#f16e00)));
+    background-color: transparent;
+}
+
+.o-button--text.o-button--light.o-button--hover,
+.o-button--text.o-button--light.o-button--hover::after {
+    background-color: var(--o-button-light-text-active-bg-color,var(--o-bg-color-container-active,var(--o-gray-color-3,#dddddd)));
+}
+
+.o-button--text.o-button--disabled {
+    color: var(--o-button-default-disabled-color,var(--o-text-color-disabled,var(--o-font-gray-4,rgba(0,0,0,.26))));
+}
+
+.o-button--outline {
+    color: var(--o-button-default-outline-color,var(--o-text-color-primary,var(--o-font-gray-1,#1c1b1f)));
+    background-color: var(--o-bg-color-container,var(--o-font-white-1,#fff));
+}
+
+.o-button--outline,
+.o-button--outline::after {
+    border-color: var(--o-button-default-outline-border-color,var(--o-component-border,var(--o-gray-color-4,#dddddd)));
+}
+
+.o-button--outline.o-button--hover,
+.o-button--outline.o-button--hover::after {
+    background-color: var(--o-button-default-outline-active-bg-color,var(--o-bg-color-container-active,var(--o-gray-color-3,#dddddd)));
+    border-color: var(--o-button-default-outline-active-border-color,var(--o-component-border,var(--o-gray-color-4,#dddddd)));
+}
+
+.o-button--outline.o-button--disabled {
+    color: var(--o-button-default-outline-disabled-color,var(--o-component-border,var(--o-gray-color-4,#dddddd)));
+}
+
+.o-button--outline.o-button--disabled,
+.o-button--outline.o-button--disabled::after {
+    border-color: var(--o-button-default-outline-disabled-color,var(--o-component-border,var(--o-gray-color-4,#dddddd)));
+}
+
+.o-button--outline.o-button--primary {
+    color: var(--o-button-primary-outline-color,var(--o-brand-color,var(--o-primary-color-7,#f16e00)));
+}
+
+.o-button--outline.o-button--primary,
+.o-button--outline.o-button--primary::after {
+    border-color: var(--o-button-primary-outline-border-color,var(--o-button-primary-outline-color,var(--o-brand-color,var(--o-primary-color-7,#f16e00))));
+}
+
+.o-button--outline.o-button--primary.o-button--hover {
+    color: var(--o-button-primary-outline-active-border-color,var(--o-brand-color-active,var(--o-primary-color-8,#cd5e00)));
+}
+
+.o-button--outline.o-button--primary.o-button--hover::after {
+    background-color: var(--o-button-primary-outline-active-bg-color,var(--o-bg-color-container-active,var(--o-gray-color-3,#dddddd)));
+    border-color: var(--o-button-primary-outline-active-border-color,var(--o-brand-color-active,var(--o-primary-color-8,#cd5e00)));
+}
+
+.o-button--outline.o-button--primary.o-button--disabled {
+    background-color: transparent;
+    color: var(--o-button-primary-outline-disabled-color,var(--o-brand-color-disabled,var(--o-primary-color-3,#f9c599)));
+}
+
+.o-button--outline.o-button--primary.o-button--disabled,
+.o-button--outline.o-button--primary.o-button--disabled::after {
+    border-color: var(--o-button-primary-outline-disabled-color,var(--o-brand-color-disabled,var(--o-primary-color-3,#f9c599)));
+}
+
+.o-button--outline.o-button--danger {
+    color: var(--o-button-danger-outline-color,var(--o-error-color,var(--o-error-color-6,#cd3c14)));
+}
+
+.o-button--outline.o-button--danger,
+.o-button--outline.o-button--danger::after {
+    border-color: var(--o-button-danger-outline-border-color,var(--o-button-danger-outline-color,var(--o-error-color,var(--o-error-color-6,#cd3c14))));
+}
+
+.o-button--outline.o-button--danger.o-button--hover {
+    color: var(--o-button-danger-outline-active-border-color,var(--o-error-color-active,var(--o-error-color-7,#ad352f)));
+}
+
+.o-button--outline.o-button--danger.o-button--hover::after {
+    background-color: var(--o-button-danger-outline-active-bg-color,var(--o-bg-color-container-active,var(--o-gray-color-3,#dddddd)));
+    border-color: var(--o-button-danger-outline-active-border-color,var(--o-error-color-active,var(--o-error-color-7,#ad352f)));
+}
+
+.o-button--outline.o-button--danger.o-button--disabled {
+    background-color: var(--o-bg-color-container,var(--o-font-white-1,#fff));
+    color: var(--o-button-danger-outline-disabled-color,var(--o-error-color-3,#ffb9b0));
+}
+
+.o-button--outline.o-button--danger.o-button--disabled,
+.o-button--outline.o-button--danger.o-button--disabled::after {
+    border-color: var(--o-button-danger-outline-disabled-color,var(--o-error-color-3,#ffb9b0));
+}
+
+.o-button--outline.o-button--light {
+    color: var(--o-button-light-outline-color,var(--o-brand-color,var(--o-primary-color-7,#f16e00)));
+    background-color: var(--o-button-light-outline-bg-color,var(--o-brand-color-light,var(--o-primary-color-1,#fef3eb)));
+}
+
+.o-button--outline.o-button--light,
+.o-button--outline.o-button--light::after {
+    border-color: var(--o-button-light-outline-border-color,var(--o-button-light-outline-color,var(--o-brand-color,var(--o-primary-color-7,#f16e00))));
+}
+
+.o-button--outline.o-button--light.o-button--hover {
+    color: var(--o-button-light-outline-active-border-color,var(--o-brand-color-active,var(--o-primary-color-8,#cd5e00)));
+}
+
+.o-button--outline.o-button--light.o-button--hover,
+.o-button--outline.o-button--light.o-button--hover::after {
+    background-color: var(--o-button-light-outline-active-bg-color,var(--o-brand-color-light-active,var(--o-primary-color-2,#fce2cc)));
+    border-color: var(--o-button-light-outline-active-border-color,var(--o-brand-color-active,var(--o-primary-color-8,#cd5e00)));
+}
+
+.o-button--outline.o-button--light.o-button--disabled {
+    background-color: var(--o-bg-color-container,var(--o-font-white-1,#fff));
+    color: var(--o-button-light-outline-disabled-color,var(--o-brand-color-disabled,var(--o-primary-color-3,#f9c599)));
+}
+
+.o-button--outline.o-button--light.o-button--disabled,
+.o-button--outline.o-button--light.o-button--disabled::after {
+    border-color: var(--o-button-light-outline-disabled-color,var(--o-brand-color-disabled,var(--o-primary-color-3,#f9c599)));
+}
+
+.o-button--dashed {
+    background-color: var(--o-bg-color-container,var(--o-font-white-1,#fff));
+    border-style: dashed;
+    border-width: 2rpx;
+}
+
+.o-button--dashed::after {
+    border: 0;
+}
+
+.o-button--dashed.o-button--hover,
+.o-button--dashed.o-button--hover::after {
+    background-color: var(--o-button-default-outline-active-bg-color,var(--o-bg-color-container-active,var(--o-gray-color-3,#dddddd)));
+    border-color: var(--o-button-default-outline-active-border-color,var(--o-component-border,var(--o-gray-color-4,#dddddd)));
+}
+
+.o-button--dashed.o-button--primary {
+    color: var(--o-button-primary-dashed-color,var(--o-brand-color,var(--o-primary-color-7,#f16e00)));
+}
+
+.o-button--dashed.o-button--primary,
+.o-button--dashed.o-button--primary::after {
+    border-color: var(--o-button-primary-dashed-border-color,var(--o-button-primary-dashed-color,var(--o-brand-color,var(--o-primary-color-7,#f16e00))));
+}
+
+.o-button--dashed.o-button--primary.o-button--disabled {
+    background-color: var(--o-bg-color-container,var(--o-font-white-1,#fff));
+    color: var(--o-button-primary-dashed-disabled-color,var(--o-brand-color-disabled,var(--o-primary-color-3,#f9c599)));
+}
+
+.o-button--dashed.o-button--primary.o-button--disabled,
+.o-button--dashed.o-button--primary.o-button--disabled::after {
+    border-color: var(--o-button-primary-dashed-disabled-color,var(--o-brand-color-disabled,var(--o-primary-color-3,#f9c599)));
+}
+
+.o-button--dashed.o-button--danger {
+    color: var(--o-button-danger-dashed-color,var(--o-error-color,var(--o-error-color-6,#cd3c14)));
+}
+
+.o-button--dashed.o-button--danger,
+.o-button--dashed.o-button--danger::after {
+    border-color: var(--o-button-danger-dashed-border-color,var(--o-button-danger-dashed-color,var(--o-error-color,var(--o-error-color-6,#cd3c14))));
+}
+
+.o-button--dashed.o-button--danger.o-button--disabled {
+    background-color: transparent;
+    color: var(--o-button-danger-dashed-disabled-color,var(--o-button-danger-disabled-color,var(--o-font-white-1,#fff)));
+}
+
+.o-button--dashed.o-button--danger.o-button--disabled::after {
+    border-color: var(--o-button-danger-dashed-disabled-color,var(--o-button-danger-disabled-color,var(--o-font-white-1,#fff)));
+}
+
+.o-button--ghost {
+    background-color: transparent;
+    color: var(--o-button-ghost-color,var(--o-text-color-anti,var(--o-font-white-1,#fff)));
+}
+
+.o-button--ghost,
+.o-button--ghost::after {
+    border-color: var(--o-button-ghost-border-color,var(--o-button-ghost-color,var(--o-text-color-anti,var(--o-font-white-1,#fff))));
+}
+
+.o-button--ghost.o-button--default.o-button--hover {
+    color: var(--o-button-ghost-hover-color,var(--o-font-white-2,rgba(255,255,255,.55)));
+}
+
+.o-button--ghost.o-button--default.o-button--hover,
+.o-button--ghost.o-button--default.o-button--hover::after {
+    background-color: transparent;
+    border-color: var(--o-button-ghost-hover-color,var(--o-font-white-2,rgba(255,255,255,.55)));
+}
+
+.o-button--ghost.o-button--primary {
+    color: var(--o-button-ghost-primary-color,var(--o-brand-color,var(--o-primary-color-7,#f16e00)));
+}
+
+.o-button--ghost.o-button--primary,
+.o-button--ghost.o-button--primary::after {
+    border-color: var(--o-button-ghost-primary-border-color,var(--o-brand-color,var(--o-primary-color-7,#f16e00)));
+}
+
+.o-button--ghost.o-button--primary.o-button--hover {
+    color: var(--o-button-ghost-primary-hover-color,var(--o-brand-color-active,var(--o-primary-color-8,#cd5e00)));
+}
+
+.o-button--ghost.o-button--primary.o-button--hover,
+.o-button--ghost.o-button--primary.o-button--hover::after {
+    background-color: transparent;
+    border-color: var(--o-button-ghost-primary-hover-color,var(--o-brand-color-active,var(--o-primary-color-8,#cd5e00)));
+}
+
+.o-button--ghost.o-button--primary.o-button--text.o-button--hover,
+.o-button--ghost.o-button--primary.o-button--text.o-button--hover::after {
+    background-color: var(--o-gray-color-10,#4b4b4b);
+}
+
+.o-button--ghost.o-button--primary.o-button--disabled {
+    background-color: transparent;
+    color: var(--o-button-ghost-disabled-color,var(--o-font-white-4,rgba(255,255,255,.22)));
+}
+
+.o-button--ghost.o-button--primary.o-button--disabled,
+.o-button--ghost.o-button--primary.o-button--disabled::after {
+    border-color: var(--o-button-ghost-disabled-color,var(--o-font-white-4,rgba(255,255,255,.22)));
+}
+
+.o-button--secondary {
+    color: var(--o-button-secondary-color,var(--o-text-color-anti,var(--o-font-white-1,#fff)));
+    background-color: var(--o-button-secondary-bg-color,var(--o-secondary-color,#000));
+    border-color: var(--o-button-secondary-border-color,var(--o-secondary-color,#000));
+}
+
+.o-button--secondary::after {
+    border-width: var(--o-button-border-width,4rpx);
+    border-color: var(--o-button-secondary-border-color,var(--o-secondary-color,#000));
+}
+
+.o-button--secondary.o-button--hover {
+    z-index: 0;
+}
+
+.o-button--secondary.o-button--hover,
+.o-button--secondary.o-button--hover::after {
+    background-color: var(--o-button-secondary-active-bg-color,var(--o-secondary-color-active,#333));
+    border-color: var(--o-button-secondary-active-border-color,var(--o-secondary-color-active,#333));
+}
+
+.o-button--secondary.o-button--disabled {
+    color: var(--o-button-secondary-disabled-color,var(--o-text-color-anti,var(--o-font-white-1,#fff)));
+    background-color: var(--o-button-secondary-disabled-bg,var(--o-secondary-color-disabled,#b3b3b3));
+}
+
+.o-button--secondary.o-button--disabled,
+.o-button--secondary.o-button--disabled::after {
+    border-color: var(--o-button-secondary-disabled-border-color,var(--o-secondary-color-disabled,#b3b3b3));
+}
+
+.o-button--text.o-button--secondary {
+    color: var(--o-button-secondary-text-color,var(--o-secondary-color,#000));
+    background-color: transparent;
+}
+
+.o-button--text.o-button--secondary.o-button--hover,
+.o-button--text.o-button--secondary.o-button--hover::after {
+    background-color: var(--o-button-secondary-text-active-bg-color,var(--o-bg-color-container-active,var(--o-gray-color-3,#dddddd)));
+}
+
+.o-button--text.o-button--secondary.o-button--disabled {
+    color: var(--o-button-secondary-text-disabled-color,var(--o-secondary-color-disabled,#b3b3b3));
+    background-color: var(--o-bg-color-container,var(--o-font-white-1,#fff));
+}
+
+.o-button--outline.o-button--secondary {
+    color: var(--o-button-secondary-outline-color,var(--o-secondary-color,#000));
+}
+
+.o-button--outline.o-button--secondary,
+.o-button--outline.o-button--secondary::after {
+    border-color: var(--o-button-secondary-outline-border-color,var(--o-button-secondary-outline-color,var(--o-secondary-color,#000)));
+}
+
+.o-button--outline.o-button--secondary.o-button--hover {
+    color: var(--o-button-secondary-outline-active-border-color,var(--o-secondary-color-active,#333));
+}
+
+.o-button--outline.o-button--secondary.o-button--hover::after {
+    background-color: var(--o-button-secondary-outline-active-bg-color,var(--o-bg-color-container-active,var(--o-gray-color-3,#dddddd)));
+    border-color: var(--o-button-secondary-outline-active-border-color,var(--o-secondary-color-active,#333));
+}
+
+.o-button--outline.o-button--secondary.o-button--disabled {
+    background-color: transparent;
+    color: var(--o-button-secondary-outline-disabled-color,var(--o-secondary-color-disabled,#b3b3b3));
+}
+
+.o-button--outline.o-button--secondary.o-button--disabled,
+.o-button--outline.o-button--secondary.o-button--disabled::after {
+    border-color: var(--o-button-secondary-outline-disabled-color,var(--o-secondary-color-disabled,#b3b3b3));
+}
+
+.o-button--dashed.o-button--secondary {
+    color: var(--o-button-secondary-dashed-color,var(--o-secondary-color,#000));
+}
+
+.o-button--dashed.o-button--secondary,
+.o-button--dashed.o-button--secondary::after {
+    border-color: var(--o-button-secondary-dashed-border-color,var(--o-button-secondary-dashed-color,var(--o-secondary-color,#000)));
+}
+
+.o-button--dashed.o-button--secondary.o-button--disabled {
+    background-color: var(--o-bg-color-container,var(--o-font-white-1,#fff));
+    color: var(--o-button-secondary-dashed-disabled-color,var(--o-secondary-color-disabled,#b3b3b3));
+}
+
+.o-button--dashed.o-button--secondary.o-button--disabled,
+.o-button--dashed.o-button--secondary.o-button--disabled::after {
+    border-color: var(--o-button-secondary-dashed-disabled-color,var(--o-secondary-color-disabled,#b3b3b3));
+}
+
+.o-button--ghost.o-button--secondary {
+    color: var(--o-button-ghost-secondary-color,var(--o-secondary-color,#000));
+}
+
+.o-button--ghost.o-button--secondary,
+.o-button--ghost.o-button--secondary::after {
+    border-color: var(--o-button-ghost-secondary-border-color,var(--o-secondary-color,#000));
+}
+
+.o-button--ghost.o-button--secondary.o-button--hover {
+    color: var(--o-button-ghost-secondary-hover-color,var(--o-secondary-color-active,#333));
+}
+
+.o-button--ghost.o-button--secondary.o-button--hover,
+.o-button--ghost.o-button--secondary.o-button--hover::after {
+    background-color: transparent;
+    border-color: var(--o-button-ghost-secondary-hover-color,var(--o-secondary-color-active,#333));
+}
+
+.o-button--ghost.o-button--secondary.o-button--text.o-button--hover,
+.o-button--ghost.o-button--secondary.o-button--text.o-button--hover::after {
+    background-color: var(--o-gray-color-10,#4b4b4b);
+}
+
+.o-button--ghost.o-button--secondary.o-button--disabled {
+    background-color: transparent;
+    color: var(--o-button-ghost-disabled-color,var(--o-font-white-4,rgba(255,255,255,.22)));
+}
+
+.o-button--ghost.o-button--secondary.o-button--disabled,
+.o-button--ghost.o-button--secondary.o-button--disabled::after {
+    border-color: var(--o-button-ghost-disabled-color,var(--o-font-white-4,rgba(255,255,255,.22)));
+}
+
+.o-button--ghost.o-button--danger {
+    color: var(--o-button-ghost-danger-color,var(--o-error-color,var(--o-error-color-6,#cd3c14)));
+}
+
+.o-button--ghost.o-button--danger,
+.o-button--ghost.o-button--danger::after {
+    border-color: var(--o-button-ghost-danger-border-color,var(--o-error-color,var(--o-error-color-6,#cd3c14)));
+}
+
+.o-button--ghost.o-button--danger.o-button--hover {
+    color: var(--o-button-ghost-danger-hover-color,var(--o-error-color-active,var(--o-error-color-7,#ad352f)));
+}
+
+.o-button--ghost.o-button--danger.o-button--hover,
+.o-button--ghost.o-button--danger.o-button--hover::after {
+    background-color: transparent;
+    border-color: var(--o-button-ghost-danger-hover-color,var(--o-error-color-active,var(--o-error-color-7,#ad352f)));
+}
+
+.o-button--ghost.o-button--danger.o-button--text.o-button--hover,
+.o-button--ghost.o-button--danger.o-button--text.o-button--hover::after {
+    background-color: var(--o-gray-color-10,#4b4b4b);
+}
+
+.o-button--ghost.o-button--danger.o-button--disabled {
+    background-color: transparent;
+    color: var(--o-button-ghost-disabled-color,var(--o-font-white-4,rgba(255,255,255,.22)));
+}
+
+.o-button--ghost.o-button--danger.o-button--disabled,
+.o-button--ghost.o-button--danger.o-button--disabled::after {
+    border-color: var(--o-button-ghost-disabled-color,var(--o-font-white-4,rgba(255,255,255,.22)));
+}
+
+.o-button--ghost.o-button--default.o-button--text.o-button--hover,
+.o-button--ghost.o-button--default.o-button--text.o-button--hover::after {
+    background-color: var(--o-gray-color-10,#4b4b4b);
+}
+
+.o-button--ghost.o-button--default.o-button--disabled {
+    background-color: transparent;
+    color: var(--o-button-ghost-disabled-color,var(--o-font-white-4,rgba(255,255,255,.22)));
+}
+
+.o-button--ghost.o-button--default.o-button--disabled,
+.o-button--ghost.o-button--default.o-button--disabled::after {
+    border-color: var(--o-button-ghost-disabled-color,var(--o-font-white-4,rgba(255,255,255,.22)));
+}
+
+.o-button__icon+.o-button__content:not(:empty),
+.o-button__loading+.o-button__content:not(:empty) {
+    margin-left: calc(var(--o-spacer,16rpx)/ 2);
+}
+
+.o-button__icon {
+    border-radius: var(--o-button-icon-border-radius,8rpx);
+}
+
+.o-button--round.o-button--size-large {
+    border-radius: calc(var(--o-button-large-height,96rpx)/ 2);
+}
+
+.o-button--round.o-button--size-large::after {
+    border-radius: var(--o-button-large-height,96rpx);
+}
+
+.o-button--round.o-button--size-medium {
+    border-radius: calc(var(--o-button-medium-height,80rpx)/ 2);
+}
+
+.o-button--round.o-button--size-medium::after {
+    border-radius: var(--o-button-medium-height,80rpx);
+}
+
+.o-button--round.o-button--size-small {
+    border-radius: calc(var(--o-button-small-height,64rpx)/ 2);
+}
+
+.o-button--round.o-button--size-small::after {
+    border-radius: var(--o-button-small-height,64rpx);
+}
+
+.o-button--round.o-button--size-extra-small {
+    border-radius: calc(var(--o-button-extra-small-height,56rpx)/ 2);
+}
+
+.o-button--round.o-button--size-extra-small::after {
+    border-radius: var(--o-button-extra-small-height,56rpx);
+}
+
+.o-button--square {
+    padding: 0;
+}
+
+.o-button--square.o-button--size-large {
+    width: var(--o-button-large-height,96rpx);
+}
+
+.o-button--square.o-button--size-medium {
+    width: var(--o-button-medium-height,80rpx);
+}
+
+.o-button--square.o-button--size-small {
+    width: var(--o-button-small-height,64rpx);
+}
+
+.o-button--square.o-button--size-extra-small {
+    width: var(--o-button-extra-small-height,56rpx);
+}
+
+.o-button--circle {
+    padding: 0;
+    border-radius: var(--o-radius-circle,50%);
+}
+
+.o-button--circle.o-button--size-large {
+    width: var(--o-button-large-height,96rpx);
+}
+
+.o-button--circle.o-button--size-large::after {
+    border-radius: var(--o-radius-circle,50%);
+}
+
+.o-button--circle.o-button--size-medium {
+    width: var(--o-button-medium-height,80rpx);
+}
+
+.o-button--circle.o-button--size-medium::after {
+    border-radius: var(--o-radius-circle,50%);
+}
+
+.o-button--circle.o-button--size-small {
+    width: var(--o-button-small-height,64rpx);
+}
+
+.o-button--circle.o-button--size-small::after {
+    border-radius: var(--o-radius-circle,50%);
+}
+
+.o-button--circle.o-button--size-extra-small {
+    width: var(--o-button-extra-small-height,56rpx);
+}
+
+.o-button--circle.o-button--size-extra-small::after {
+    border-radius: var(--o-radius-circle,50%);
+}
+
+.o-button.o-button--block {
+    display: flex;
+    width: 100%;
+}
+
+.o-button--disabled {
+    cursor: not-allowed;
+}
+
+.o-button__loading--wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.o-button.o-button--hover::after {
+    z-index: -1;
+}
+
+.o-button--base.o-button--default:not(.o-button--ghost):not(.o-button--disabled) {
+    color: var(--o-button-default-fill-text-color,#1c1b1f);
+}
+