vdesign-ui 0.2.12 → 0.2.14

package/dist/components/button/style.less

@@ -1,558 +1,558 @@
-@prefix: ~"vd-btn";
-
-.@{prefix} {
-  // 抽离 css valuable 适应 1px 边框，如：wireframe
-  --btn-border-radius: var(--radius-button-m);
-  --btn-border-color: transparent;
-  --btn-line-height: var(--height-button-m);
-  height: var(--height-button-m);
-  padding-inline-start: var(--spacing-button-m-padding_left);
-  padding-inline-end: var(--spacing-button-m-padding_right);
-  border-radius: var(--btn-border-radius);
-  border: 0 solid var(--btn-border-color);
-  /* font-family: var(--en-single-f-c-s-fontFamily); */
-  font-size: var(--en-single-f-c-s-fontSize);  
-  font-weight: var(--en-single-f-c-s-fontWeight);
-  line-height: var(--btn-line-height);
-  background-color: var(--color-button-primary-bg-default);
-  color: var(--color-button-primary-text-default);
-  // end-btn-css-vars
-  box-sizing: border-box;
-  position: relative;
-  display: inline-block;
-  margin: 0;
-  text-align: center;
-  white-space: nowrap;
-  cursor: pointer;
-  appearance: none;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  -webkit-font-smoothing: auto;
-
-  .@{prefix}-icon-small {
-    --icon-small: var(--icon-button-s);
-  }
-
-  .@{prefix}-icon-medium {
-    --icon-medium: var(--icon-button-m);
-  }
-
-  .@{prefix}-icon-large {
-    --icon-large: var(--icon-button-l);
-  }
-
-  &-inner {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: var(--spacing-button-m_icon-margin_y);
-    // gap: 4px;
-    // --spacing-button-l_icon-margin_y
-    // --spacing-button-m_icon-margin_y
-    // --spacing-button-s_icon-margin_y
-  }
-
-  // 1px border 目前解决方案会与伪类冲突的情况如：before/after
-  // &::before {
-  //   content: "";
-  //   pointer-events: none;
-  //   display: block;
-  //   position: absolute;
-  //   left: 0;
-  //   top: 0;
-  //   transform-origin: 0 0;
-  //   border: 1PX solid var(--btn-border-color);
-  //   border-radius: var(--btn-border-radius);
-  //   box-sizing: border-box;
-  //   width: 100%;
-  //   height: 100%;
-
-  //   @media (min-resolution: 2dppx) {
-  //     width: 200%;
-  //     height: 200%;
-  //     border-radius: calc(var(--btn-border-radius) * 2);
-  //     transform: scale(.5);
-  //   }
-
-  //   @media (min-resolution: 3dppx) {
-  //     width: 300%;
-  //     height: 300%;
-  //     border-radius: calc(var(--btn-border-radius) * 3);
-  //     transform: scale(.333);
-  //   }
-  // }
-
-  &:active {
-    background-color: var(--color-button-primary-bg-press);
-    color: var(--color-button-primary-text-press);
-  }
-
-  &:disabled {
-    background-color: var(--color-button-primary-bg-disable);
-    color: var(--color-button-primary-text-disable);
-    pointer-events: none;
-    cursor: not-allowed;
-  }
-
-  &-icon {
-    --btn-border-radius: 0;
-    border-color: transparent;
-    background-color: transparent;
-    color: var(--color-button-border-text-default);
-    font-size: var(--en-single-f-b-r-fontSize);
-    font-weight: var(--en-single-f-c-r-fontWeight);
-    line-height: 1;
-    padding: 0;
-    min-width: var(--height-button-m);
-    height: var(--height-button-m);
-
-    &:active {
-      border-color: transparent;
-      background-color: transparent;
-      color: var(--color-button-border-text-press);
-    }
-
-    &:disabled {
-      border-color: transparent;
-      background-color: transparent;
-      color: var(--color-button-border-text-disable);
-    }
-
-    .@{prefix}-inner {
-      flex-direction: column;
-      gap: var(--spacing-button-icon_m_text-margin_top);
-    }
-
-    &.@{prefix}-small {
-      font-size: var(--en-single-f-a-r-fontSize);
-      font-weight: var(--en-single-f-c-r-fontWeight);
-      padding: 0;
-      min-width: var(--height-button-s);
-      height: var(--height-button-s);
-
-      .@{prefix}-inner {
-          gap: var(--spacing-button-icon_s_text-margin_top);
-      }
-    }
-
-    &.@{prefix}-medium {
-      font-size: var(--en-single-f-b-r-fontSize);
-      font-weight: var(--en-single-f-c-r-fontWeight);
-      padding: 0;
-      min-width: var(--height-button-m);
-      height: var(--height-button-m);
-
-      .@{prefix}-inner {
-          gap: var(--spacing-button-icon_m_text-margin_top);
-      }
-    }
-
-    &.@{prefix}-large {
-      font-size: var(--en-single-f-c-r-fontSize);
-      font-weight: var(--en-single-f-c-r-fontWeight);
-      padding: 0;
-      min-width: var(--height-button-l);
-      height: var(--height-button-l);
-
-      .@{prefix}-inner {
-          gap: var(--spacing-button-icon_l_text-margin_top);
-      }
-    }
-}
-
-  &-primary {
-    background-color: var(--color-button-primary-bg-default);
-    color: var(--color-button-primary-text-default);
-
-    &:active {
-      background-color: var(--color-button-primary-bg-press);
-      color: var(--color-button-primary-text-press);
-    }
-
-    &:disabled {
-      background-color: var(--color-button-primary-bg-disable);
-      color: var(--color-button-primary-text-disable);
-    }
-  }
-
-  &-secondary {
-    background-color: var(--color-button-secondary-bg-default);
-    color: var(--color-button-secondary-text-default);
-
-    &:active {
-      background-color: var(--color-button-secondary-bg-press);
-      color: var(--color-button-secondary-text-press);
-    }
-
-    &:disabled {
-      background-color: var(--color-button-secondary-bg-disable);
-      color: var(--color-button-secondary-text-disable);
-    }
-  }
-
-  &-tertiary {
-    background-color: var(--color-button-tertiary-bg-default);
-    color: var(--color-button-tertiary-text-default);
-
-    &:active {
-      background-color: var(--color-button-tertiary-bg-press);
-      color: var(--color-button-tertiary-text-press);
-    }
-
-    &:disabled {
-      background-color: var(--color-button-tertiary-bg-disable);
-      color: var(--color-button-tertiary-text-disable);
-    }
-  }
-
-  &-warning {
-    background-color: var(--color-button-warning-bg-default);
-    color: var(--color-button-warning-text-default);
-
-    &:active {
-      background-color: var(--color-button-warning-bg-press);
-      color: var(--color-button-warning-text-press);
-    }
-
-    &:disabled {
-      background-color: var(--color-button-warning-bg-disable);
-      color: var(--color-button-warning-text-disable);
-    }
-  }
-
-  &-warning_grey {
-    background-color: var(--color-button-warning_grey-bg-default);
-    color: var(--color-button-warning_grey-text-default);
-
-    &:active {
-      background-color: var(--color-button-warning_grey-bg-press);
-      color: var(--color-button-warning_grey-text-press);
-    }
-
-    &:disabled {
-      background-color: var(--color-button-warning_grey-bg-disable);
-      color: var(--color-button-warning_grey-text-disable);
-    }
-  }
-
-  &-tertiary_grey {
-    border-color: transparent;
-    background-color: var(--color-button-tertiary_grey-bg-default);
-    color: var(--color-button-tertiary_grey-text-default);
-
-    &:active {
-      border-color: transparent;
-      background-color: var(--color-button-tertiary_grey-bg-press);
-      color: var(--color-button-tertiary_grey-text-press);
-    }
-
-    &:disabled {
-      border-color: transparent;
-      background-color: var(--color-button-tertiary_grey-bg-disable);
-      color: var(--color-button-tertiary_grey-text-disable);
-    }
-  }
-
-  &-link_text {
-    background-color: transparent;
-    border-color: transparent;
-    color: var(--color-button-link_text-default);
-
-    &:active {
-      background-color: transparent;
-      border-color: transparent;
-      color: var(--color-button-link_text-press);
-    }
-
-    &:disabled {
-      background-color: transparent;
-      border-color: transparent;
-      color: var(--color-button-link_text-disable);
-    }
-  }
-
-  &-primary_text {
-    background-color: transparent;
-    border-color: transparent;
-    color: var(--color-button-primary_borderless_text-default);
-
-    &:active {
-      background-color: transparent;
-      border-color: transparent;
-      color: var(--color-button-primary_borderless_text-press);
-    }
-
-    &:disabled {
-      background-color: transparent;
-      border-color: transparent;
-      color: var(--color-button-primary_borderless_text-disable);
-    }
-  }
-
-  &-warning_text {
-    background-color: transparent;
-    border-color: transparent;
-    color: var(--color-button-warning_borderless_text-default);
-
-    &:active {
-      background-color: transparent;
-      border-color: transparent;
-      color: var(--color-button-warning_borderless_text-press);
-    }
-
-    &:disabled {
-      background-color: transparent;
-      border-color: transparent;
-      color: var(--color-button-warning_borderless_text-disable);
-    }
-
-  }
-
-  &-tertiary_text {
-    background-color: transparent;
-    border-color: transparent;
-    color: var(--color-button-tertiary_borderless_text-default);
-
-    &:active {
-      background-color: transparent;
-      border-color: transparent;
-      color: var(--color-button-tertiary_borderless_text-press);
-    }
-
-    &:disabled {
-      background-color: transparent;
-      border-color: transparent;
-      color: var(--color-button-tertiary_borderless_text-disable);
-    }
-
-  }
-
-  &-wireframe {
-    --btn-border-color: var(--color-button-border-default);
-    border: 1px solid var(--btn-border-color);
-    background-color: transparent;
-    color: var(--color-button-border-text-default);
-    line-height: 100%;
-
-    &:active {
-      --btn-border-color: var(--color-button-border-press);
-      background-color: transparent;
-      color: var(--color-button-border-text-press);
-    }
-
-    &:disabled {
-      --btn-border-color: var(--color-button-border-disable);
-      background-color: transparent;
-      color: var(--color-button-border-text-disable);
-    }
-
-    .@{prefix}-inner {
-      gap: calc(var(--spacing-button-m_icon-margin_y) * 0.5);
-    }
-
-    .@{prefix}-small {
-      .@{prefix}-inner {
-        gap: calc(var(--spacing-button-s_icon-margin_y) * 0.5);
-      }
-    }
-
-    .@{prefix}-medium {
-      .@{prefix}-inner {
-        gap: calc(var(--spacing-button-m_icon-margin_y) * 0.5);
-      }
-    }
-
-    .@{prefix}-large {
-      .@{prefix}-inner {
-        gap: calc(var(--spacing-button-l_icon-margin_y) * 0.5);
-      }
-    }
-  }
-
-  &-block {
-    display: block;
-    width: 100%;
-  }
-
-  //
-  // Button Sizes
-  //
-  &-small {
-  --btn-border-radius: var(--radius-button-s);
-  --btn-line-height: var(--height-button-s);
-  height: var(--height-button-s);
-  padding-inline-start: var(--spacing-button-s-padding_left);
-  padding-inline-end: var(--spacing-button-s-padding_right);
-  font-size: var(--en-single-f-c-r-fontSize);
-  font-weight: var(--en-single-f-c-r-fontWeight);
-
-  .@{prefix}-inner {
-      gap: var(--spacing-button-s_icon-margin_y);
-  }
-}
-
-&-medium {
-  --btn-border-radius: var(--radius-button-m);
-  --btn-line-height: var(--height-button-m);
-  height: var(--height-button-m);
-  padding-inline-start: var(--spacing-button-m-padding_left);
-  padding-inline-end: var(--spacing-button-m-padding_right);
-  font-size: var(--en-single-f-c-s-fontSize);
-
-  .@{prefix}-inner {
-      gap: var(--spacing-button-m_icon-margin_y);
-  }
-}
-
-&-large {
-  --btn-border-radius: var(--radius-button-l);
-  --btn-line-height: var(--height-button-l);
-  height: var(--height-button-l);
-  padding-inline-start: var(--spacing-button-l-padding_left);
-  padding-inline-end: var(--spacing-button-l-padding_right);
-  font-size: var(--en-single-f-d-s-fontSize);
-
-  .@{prefix}-inner {
-      gap: var(--spacing-button-l_icon-margin_y);
-  }
-}
-
-
-  //
-  // Button Business
-  //
-  &-sell {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: calc(var(--height-button-l) * 3);
-    height:var(--height-button-l);
-    background-color: var(--color-button-sell-bg-default);
-    border-radius: var(--radius-button-m);
-    color: var(--color-button-sell-text-default);
-    font-size: var(--en-single-f-d-s-fontSize);
-
-    &::after {
-      content: '';
-      position: absolute;
-      inset-inline-end: -9px;
-      width: var(--height-button-l);
-      height: var(--height-button-l);
-      border-radius: var(--radius-button-m);
-      background-color: var(--color-button-sell-bg-default);
-      transform: skewX(-21deg);
-      z-index: 0;
-    }
-
-    &:active {
-      background-color: var(--color-button-sell-bg-press);
-      color: var(--color-button-sell-text-press);
-
-      &::after {
-        background-color: var(--color-button-sell-bg-press);
-      }
-    }
-
-    &:disabled {
-      background-color: var(--color-button-sell-bg-disable);
-      color: var(--color-button-border-text-disable);
-
-      &::after {
-        background-color: var(--color-button-sell-bg-disable);
-      }
-    }
-  }
-
-  &-buy {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: calc(var(--height-button-l) * 3);
-    height: var(--height-button-l);
-    background-color: var(--color-button-buy-bg-default);
-    border-radius: var(--radius-button-m);
-    color: var(--color-button-buy-text-default);
-    font-size: var(--en-single-f-d-s-fontSize);
-
-    &::after {
-      content: '';
-      position: absolute;
-      inset-inline-start: -9px;
-      width: var(--height-button-l);
-      height: var(--height-button-l);
-      border-radius: var(--radius-button-m);
-      background-color: var(--color-button-buy-bg-default);
-      transform: skewX(-21deg);
-      z-index: 0;
-    }
-
-    &:active {
-      background-color: var(--color-button-buy-bg-press);
-      color: var(--color-button-buy-text-press);
-
-      &::after {
-        background-color: var(--color-button-buy-bg-press);
-      }
-    }
-
-    &:disabled {
-      background-color: var(--color-button-buy-bg-disable);
-      color: var(--color-button-buy-text-disable);
-
-      &::after {
-        background-color: var(--color-button-buy-bg-disable);
-      }
-    }
-  }
-
-  &-group {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    gap: 27px;
-    // background: #fff;
-  }
-
-  // 
-  // loading
-  //
-  &-loading {
-    cursor: default;
-    pointer-events: none;
-
-    .vd-iconfont {
-      animation: vd-ani-spin 1s linear infinite;
-    }
-  }
-
-  &-round {
-    --btn-border-radius: 999em;
-    padding-inline: 0;
-    width: var(--height-button-m);
-
-    &.@{prefix}-small {
-        width: var(--height-button-s);
-        padding-inline: 0;
-    }
-
-    &.@{prefix}-medium {
-        width: var(--height-button-m);
-        padding-inline: 0;
-    }
-
-    &.@{prefix}-large {
-        width: var(--height-button-l);
-        padding-inline: 0;
-    }
-  }
-}
-
-@keyframes vd-ani-spin {
-  from {
-    transform: rotate(0);
-  }
-
-  to {
-    transform: rotate(360deg);
-  }
-}
+@prefix: ~"vd-btn";
+
+.@{prefix} {
+  // 抽离 css valuable 适应 1px 边框，如：wireframe
+  --btn-border-radius: var(--radius-button-m);
+  --btn-border-color: transparent;
+  --btn-line-height: var(--height-button-m);
+  height: var(--height-button-m);
+  padding-inline-start: var(--spacing-button-m-padding_left);
+  padding-inline-end: var(--spacing-button-m-padding_right);
+  border-radius: var(--btn-border-radius);
+  border: 0 solid var(--btn-border-color);
+  /* font-family: var(--en-single-f-c-s-fontFamily); */
+  font-size: var(--en-single-f-c-s-fontSize);  
+  font-weight: var(--en-single-f-c-s-fontWeight);
+  line-height: var(--btn-line-height);
+  background-color: var(--color-button-primary-bg-default);
+  color: var(--color-button-primary-text-default);
+  // end-btn-css-vars
+  box-sizing: border-box;
+  position: relative;
+  display: inline-block;
+  margin: 0;
+  text-align: center;
+  white-space: nowrap;
+  cursor: pointer;
+  appearance: none;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-font-smoothing: auto;
+
+  .@{prefix}-icon-small {
+    --icon-small: var(--icon-button-s);
+  }
+
+  .@{prefix}-icon-medium {
+    --icon-medium: var(--icon-button-m);
+  }
+
+  .@{prefix}-icon-large {
+    --icon-large: var(--icon-button-l);
+  }
+
+  &-inner {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--spacing-button-m_icon-margin_y);
+    // gap: 4px;
+    // --spacing-button-l_icon-margin_y
+    // --spacing-button-m_icon-margin_y
+    // --spacing-button-s_icon-margin_y
+  }
+
+  // 1px border 目前解决方案会与伪类冲突的情况如：before/after
+  // &::before {
+  //   content: "";
+  //   pointer-events: none;
+  //   display: block;
+  //   position: absolute;
+  //   left: 0;
+  //   top: 0;
+  //   transform-origin: 0 0;
+  //   border: 1PX solid var(--btn-border-color);
+  //   border-radius: var(--btn-border-radius);
+  //   box-sizing: border-box;
+  //   width: 100%;
+  //   height: 100%;
+
+  //   @media (min-resolution: 2dppx) {
+  //     width: 200%;
+  //     height: 200%;
+  //     border-radius: calc(var(--btn-border-radius) * 2);
+  //     transform: scale(.5);
+  //   }
+
+  //   @media (min-resolution: 3dppx) {
+  //     width: 300%;
+  //     height: 300%;
+  //     border-radius: calc(var(--btn-border-radius) * 3);
+  //     transform: scale(.333);
+  //   }
+  // }
+
+  &:active {
+    background-color: var(--color-button-primary-bg-press);
+    color: var(--color-button-primary-text-press);
+  }
+
+  &:disabled {
+    background-color: var(--color-button-primary-bg-disable);
+    color: var(--color-button-primary-text-disable);
+    pointer-events: none;
+    cursor: not-allowed;
+  }
+
+  &-icon {
+    --btn-border-radius: 0;
+    border-color: transparent;
+    background-color: transparent;
+    color: var(--color-button-border-text-default);
+    font-size: var(--en-single-f-b-r-fontSize);
+    font-weight: var(--en-single-f-c-r-fontWeight);
+    line-height: 1;
+    padding: 0;
+    min-width: var(--height-button-m);
+    height: var(--height-button-m);
+
+    &:active {
+      border-color: transparent;
+      background-color: transparent;
+      color: var(--color-button-border-text-press);
+    }
+
+    &:disabled {
+      border-color: transparent;
+      background-color: transparent;
+      color: var(--color-button-border-text-disable);
+    }
+
+    .@{prefix}-inner {
+      flex-direction: column;
+      gap: var(--spacing-button-icon_m_text-margin_top);
+    }
+
+    &.@{prefix}-small {
+      font-size: var(--en-single-f-a-r-fontSize);
+      font-weight: var(--en-single-f-c-r-fontWeight);
+      padding: 0;
+      min-width: var(--height-button-s);
+      height: var(--height-button-s);
+
+      .@{prefix}-inner {
+          gap: var(--spacing-button-icon_s_text-margin_top);
+      }
+    }
+
+    &.@{prefix}-medium {
+      font-size: var(--en-single-f-b-r-fontSize);
+      font-weight: var(--en-single-f-c-r-fontWeight);
+      padding: 0;
+      min-width: var(--height-button-m);
+      height: var(--height-button-m);
+
+      .@{prefix}-inner {
+          gap: var(--spacing-button-icon_m_text-margin_top);
+      }
+    }
+
+    &.@{prefix}-large {
+      font-size: var(--en-single-f-c-r-fontSize);
+      font-weight: var(--en-single-f-c-r-fontWeight);
+      padding: 0;
+      min-width: var(--height-button-l);
+      height: var(--height-button-l);
+
+      .@{prefix}-inner {
+          gap: var(--spacing-button-icon_l_text-margin_top);
+      }
+    }
+}
+
+  &-primary {
+    background-color: var(--color-button-primary-bg-default);
+    color: var(--color-button-primary-text-default);
+
+    &:active {
+      background-color: var(--color-button-primary-bg-press);
+      color: var(--color-button-primary-text-press);
+    }
+
+    &:disabled {
+      background-color: var(--color-button-primary-bg-disable);
+      color: var(--color-button-primary-text-disable);
+    }
+  }
+
+  &-secondary {
+    background-color: var(--color-button-secondary-bg-default);
+    color: var(--color-button-secondary-text-default);
+
+    &:active {
+      background-color: var(--color-button-secondary-bg-press);
+      color: var(--color-button-secondary-text-press);
+    }
+
+    &:disabled {
+      background-color: var(--color-button-secondary-bg-disable);
+      color: var(--color-button-secondary-text-disable);
+    }
+  }
+
+  &-tertiary {
+    background-color: var(--color-button-tertiary-bg-default);
+    color: var(--color-button-tertiary-text-default);
+
+    &:active {
+      background-color: var(--color-button-tertiary-bg-press);
+      color: var(--color-button-tertiary-text-press);
+    }
+
+    &:disabled {
+      background-color: var(--color-button-tertiary-bg-disable);
+      color: var(--color-button-tertiary-text-disable);
+    }
+  }
+
+  &-warning {
+    background-color: var(--color-button-warning-bg-default);
+    color: var(--color-button-warning-text-default);
+
+    &:active {
+      background-color: var(--color-button-warning-bg-press);
+      color: var(--color-button-warning-text-press);
+    }
+
+    &:disabled {
+      background-color: var(--color-button-warning-bg-disable);
+      color: var(--color-button-warning-text-disable);
+    }
+  }
+
+  &-warning_grey {
+    background-color: var(--color-button-warning_grey-bg-default);
+    color: var(--color-button-warning_grey-text-default);
+
+    &:active {
+      background-color: var(--color-button-warning_grey-bg-press);
+      color: var(--color-button-warning_grey-text-press);
+    }
+
+    &:disabled {
+      background-color: var(--color-button-warning_grey-bg-disable);
+      color: var(--color-button-warning_grey-text-disable);
+    }
+  }
+
+  &-tertiary_grey {
+    border-color: transparent;
+    background-color: var(--color-button-tertiary_grey-bg-default);
+    color: var(--color-button-tertiary_grey-text-default);
+
+    &:active {
+      border-color: transparent;
+      background-color: var(--color-button-tertiary_grey-bg-press);
+      color: var(--color-button-tertiary_grey-text-press);
+    }
+
+    &:disabled {
+      border-color: transparent;
+      background-color: var(--color-button-tertiary_grey-bg-disable);
+      color: var(--color-button-tertiary_grey-text-disable);
+    }
+  }
+
+  &-link_text {
+    background-color: transparent;
+    border-color: transparent;
+    color: var(--color-button-link_text-default);
+
+    &:active {
+      background-color: transparent;
+      border-color: transparent;
+      color: var(--color-button-link_text-press);
+    }
+
+    &:disabled {
+      background-color: transparent;
+      border-color: transparent;
+      color: var(--color-button-link_text-disable);
+    }
+  }
+
+  &-primary_text {
+    background-color: transparent;
+    border-color: transparent;
+    color: var(--color-button-primary_borderless_text-default);
+
+    &:active {
+      background-color: transparent;
+      border-color: transparent;
+      color: var(--color-button-primary_borderless_text-press);
+    }
+
+    &:disabled {
+      background-color: transparent;
+      border-color: transparent;
+      color: var(--color-button-primary_borderless_text-disable);
+    }
+  }
+
+  &-warning_text {
+    background-color: transparent;
+    border-color: transparent;
+    color: var(--color-button-warning_borderless_text-default);
+
+    &:active {
+      background-color: transparent;
+      border-color: transparent;
+      color: var(--color-button-warning_borderless_text-press);
+    }
+
+    &:disabled {
+      background-color: transparent;
+      border-color: transparent;
+      color: var(--color-button-warning_borderless_text-disable);
+    }
+
+  }
+
+  &-tertiary_text {
+    background-color: transparent;
+    border-color: transparent;
+    color: var(--color-button-tertiary_borderless_text-default);
+
+    &:active {
+      background-color: transparent;
+      border-color: transparent;
+      color: var(--color-button-tertiary_borderless_text-press);
+    }
+
+    &:disabled {
+      background-color: transparent;
+      border-color: transparent;
+      color: var(--color-button-tertiary_borderless_text-disable);
+    }
+
+  }
+
+  &-wireframe {
+    --btn-border-color: var(--color-button-border-default);
+    border: 1px solid var(--btn-border-color);
+    background-color: transparent;
+    color: var(--color-button-border-text-default);
+    line-height: 100%;
+
+    &:active {
+      --btn-border-color: var(--color-button-border-press);
+      background-color: transparent;
+      color: var(--color-button-border-text-press);
+    }
+
+    &:disabled {
+      --btn-border-color: var(--color-button-border-disable);
+      background-color: transparent;
+      color: var(--color-button-border-text-disable);
+    }
+
+    .@{prefix}-inner {
+      gap: calc(var(--spacing-button-m_icon-margin_y) * 0.5);
+    }
+
+    .@{prefix}-small {
+      .@{prefix}-inner {
+        gap: calc(var(--spacing-button-s_icon-margin_y) * 0.5);
+      }
+    }
+
+    .@{prefix}-medium {
+      .@{prefix}-inner {
+        gap: calc(var(--spacing-button-m_icon-margin_y) * 0.5);
+      }
+    }
+
+    .@{prefix}-large {
+      .@{prefix}-inner {
+        gap: calc(var(--spacing-button-l_icon-margin_y) * 0.5);
+      }
+    }
+  }
+
+  &-block {
+    display: block;
+    width: 100%;
+  }
+
+  //
+  // Button Sizes
+  //
+  &-small {
+  --btn-border-radius: var(--radius-button-s);
+  --btn-line-height: var(--height-button-s);
+  height: var(--height-button-s);
+  padding-inline-start: var(--spacing-button-s-padding_left);
+  padding-inline-end: var(--spacing-button-s-padding_right);
+  font-size: var(--en-single-f-c-r-fontSize);
+  font-weight: var(--en-single-f-c-r-fontWeight);
+
+  .@{prefix}-inner {
+      gap: var(--spacing-button-s_icon-margin_y);
+  }
+}
+
+&-medium {
+  --btn-border-radius: var(--radius-button-m);
+  --btn-line-height: var(--height-button-m);
+  height: var(--height-button-m);
+  padding-inline-start: var(--spacing-button-m-padding_left);
+  padding-inline-end: var(--spacing-button-m-padding_right);
+  font-size: var(--en-single-f-c-s-fontSize);
+
+  .@{prefix}-inner {
+      gap: var(--spacing-button-m_icon-margin_y);
+  }
+}
+
+&-large {
+  --btn-border-radius: var(--radius-button-l);
+  --btn-line-height: var(--height-button-l);
+  height: var(--height-button-l);
+  padding-inline-start: var(--spacing-button-l-padding_left);
+  padding-inline-end: var(--spacing-button-l-padding_right);
+  font-size: var(--en-single-f-d-s-fontSize);
+
+  .@{prefix}-inner {
+      gap: var(--spacing-button-l_icon-margin_y);
+  }
+}
+
+
+  //
+  // Button Business
+  //
+  &-sell {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: calc(var(--height-button-l) * 3);
+    height:var(--height-button-l);
+    background-color: var(--color-button-sell-bg-default);
+    border-radius: var(--radius-button-m);
+    color: var(--color-button-sell-text-default);
+    font-size: var(--en-single-f-d-s-fontSize);
+
+    &::after {
+      content: '';
+      position: absolute;
+      inset-inline-end: -9px;
+      width: var(--height-button-l);
+      height: var(--height-button-l);
+      border-radius: var(--radius-button-m);
+      background-color: var(--color-button-sell-bg-default);
+      transform: skewX(-21deg);
+      z-index: 0;
+    }
+
+    &:active {
+      background-color: var(--color-button-sell-bg-press);
+      color: var(--color-button-sell-text-press);
+
+      &::after {
+        background-color: var(--color-button-sell-bg-press);
+      }
+    }
+
+    &:disabled {
+      background-color: var(--color-button-sell-bg-disable);
+      color: var(--color-button-border-text-disable);
+
+      &::after {
+        background-color: var(--color-button-sell-bg-disable);
+      }
+    }
+  }
+
+  &-buy {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: calc(var(--height-button-l) * 3);
+    height: var(--height-button-l);
+    background-color: var(--color-button-buy-bg-default);
+    border-radius: var(--radius-button-m);
+    color: var(--color-button-buy-text-default);
+    font-size: var(--en-single-f-d-s-fontSize);
+
+    &::after {
+      content: '';
+      position: absolute;
+      inset-inline-start: -9px;
+      width: var(--height-button-l);
+      height: var(--height-button-l);
+      border-radius: var(--radius-button-m);
+      background-color: var(--color-button-buy-bg-default);
+      transform: skewX(-21deg);
+      z-index: 0;
+    }
+
+    &:active {
+      background-color: var(--color-button-buy-bg-press);
+      color: var(--color-button-buy-text-press);
+
+      &::after {
+        background-color: var(--color-button-buy-bg-press);
+      }
+    }
+
+    &:disabled {
+      background-color: var(--color-button-buy-bg-disable);
+      color: var(--color-button-buy-text-disable);
+
+      &::after {
+        background-color: var(--color-button-buy-bg-disable);
+      }
+    }
+  }
+
+  &-group {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    gap: 27px;
+    // background: #fff;
+  }
+
+  // 
+  // loading
+  //
+  &-loading {
+    cursor: default;
+    pointer-events: none;
+
+    .vd-iconfont {
+      animation: vd-ani-spin 1s linear infinite;
+    }
+  }
+
+  &-round {
+    --btn-border-radius: 999em;
+    padding-inline: 0;
+    width: var(--height-button-m);
+
+    &.@{prefix}-small {
+        width: var(--height-button-s);
+        padding-inline: 0;
+    }
+
+    &.@{prefix}-medium {
+        width: var(--height-button-m);
+        padding-inline: 0;
+    }
+
+    &.@{prefix}-large {
+        width: var(--height-button-l);
+        padding-inline: 0;
+    }
+  }
+}
+
+@keyframes vd-ani-spin {
+  from {
+    transform: rotate(0);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}