page button, page wx-button {
  margin-left: unset;
  margin-right: unset;
  width: unset;
}
wx-button:not([size=mini]) {
  margin-left: unset;
  margin-right: unset;
  width: unset;
}

page button.plain, page wx-button.plain {
  all: unset;
}
page button.plain.block, page wx-button.plain.block {
  display: block;
  width: 100%;
  height: 100%;
}


.wv-btn {
  --wv-btn-height: var(--wv-form-control-height-default);
  --wv-btn-border-radius: var(--wv-border-radius-default);

  font-size: unset;
  font-weight: unset;
  width: unset;
  height: unset;
  padding: unset;

  box-sizing: border-box;
  max-width: 100%;
  display: inline-flex;
  flex-wrap: wrap;
  text-align: center;
  align-items: center;
  justify-content: center; 
  position: relative;
  font-weight: 500;
  line-height: initial;
  height: var(--wv-btn-height);
  border-radius: var(--wv-btn-border-radius);

  white-space: nowrap;
  word-break: keep-all;

  box-shadow: var(--wv-box-shadow-common);
  transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), 
  transform 0.1s cubic-bezier(0.4, 0, 0.2, 1);
}

.wv-btn:active {
  box-shadow: var(--wv-box-shadow-active);
  /* transform: translateY(1rpx); */
}

.wv-btn.pill {
  border-radius: 999rpx !important;
}
.wv-btn.no-border {
  border: none !important;
}
.wv-btn.block {
  width: 100%;
}
.wv-btn.auto-width {
  width: auto !important;
}
.wv-btn.auto-height {
  height: auto !important;
  white-space: normal;
  word-break: break-all !important;
}
.wv-btn.round {
  border-radius: 50% !important;
  aspect-ratio: 1;
  padding: 0 !important;
  min-width: unset;
}

.wv-btn.quadrate { 
  --wv-quadrate-size: var(--wv-form-control-height-default);
  width: var(--wv-quadrate-size);
  height: var(--wv-quadrate-size);
  min-width: unset;
  min-height: unset;
}
.wv-btn.quadrate.huge{ --wv-quadrate-size: var(--wv-form-control-height-huge);}
.wv-btn.quadrate.large{ --wv-quadrate-size: var(--wv-form-control-height-large);}
.wv-btn.quadrate.default-size{ --wv-quadrate-size: var(--wv-form-control-height-default);}
.wv-btn.quadrate.small{ --wv-quadrate-size: var(--wv-form-control-height-small);}
.wv-btn.quadrate.mini{ --wv-quadrate-size: var(--wv-form-control-height-mini);}


.wv-btn.huge {
  gap: 8rpx;
  padding: var(--wv-padding-small) var(--wv-padding-large);
  --wv-btn-border-radius: var(--wv-border-radius-large);
  font-size: var(--wv-font-size-large);
  --wv-btn-height: var(--wv-form-control-height-huge);
  min-width: 190rpx;
}
.wv-btn.large {
  gap: 8rpx;
  padding: var(--wv-padding-small) var(--wv-padding-default);
  font-size: var(--wv-font-size-default);
  --wv-btn-border-radius: var(--wv-border-radius-large);
  --wv-btn-height: var(--wv-form-control-height-large);
  min-width: 170rpx;
}
.wv-btn.default-size, .wv-btn {
  gap: 6rpx;
  padding: var(--wv-padding-small) var(--wv-padding-default);
  font-size: var(--wv-font-size-default);
  --wv-btn-border-radius: var(--wv-border-radius-default);
  --wv-btn-height: var(--wv-form-control-height-default);
  min-width: 160rpx;
}
.wv-btn.small {
  /* width: 160rpx; */
  gap: 4rpx;
  padding: var(--wv-padding-mini) var(--wv-padding-small);
  font-size: var(--wv-font-size-small);
  --wv-btn-border-radius: var(--wv-border-radius-small);
  --wv-btn-height: var(--wv-form-control-height-small);
  min-width: 110rpx;
}
.wv-btn.mini {
  gap: 2rpx;
  padding:  0 var(--wv-padding-small);
  font-size: var(--wv-font-size-small);
  --wv-btn-border-radius: var(--wv-border-radius-mini);
  --wv-btn-height: var(--wv-form-control-height-mini);
  min-width: 80rpx;
}



.wv-btn.huge.pill {  padding: var(--wv-padding-small) var(--wv-padding-large); }
.wv-btn.large.pill {  padding: var(--wv-padding-small) var(--wv-padding-default); }
.wv-btn.default-size.pill, .wv-btn.pill {  padding: var(--wv-padding-small) var(--wv-padding-default); }
.wv-btn.small.pill {  padding: var(--wv-padding-mini) var(--wv-padding-small); }
.wv-btn.mini.pill {  padding:  0 var(--wv-padding-small); }

.wv-cmark {
  --wv-rgb-theme: var(--wv-theme-primary-rgb);
  --wv-opacity-bg-theme: 1;
  --wv-content-color-fit-theme: var(--wv-content-color-fit-primary-rgb);
  
  position: absolute;
  background: rgba(var(--wv-rgb-theme), var(--wv-opacity-bg-theme));
  color: rgba(var(--wv-content-color-fit-theme), 1);
}

.wv-cmark.lt { left: 0; top: 0; border-radius: 0 0 0 var(--wv-btn-border-radius);}
.wv-cmark, .wv-cmark.rt { right: 0; top: 0;  border-radius: 0 0 0 var(--wv-btn-border-radius);}
.wv-cmark.lb { left: 0; bottom: 0;}
.wv-cmark.rb { right: 0; bottom: 0;}

.huge .wv-cmark { font-size: var(--wv-font-size-small); padding: 8rpx 12rpx; }
.large .wv-cmark { font-size: var(--wv-font-size-small);  padding: 6rpx 10rpx; }
.wv-cmark { font-size: var(--wv-font-size-mini);  padding: 4rpx 8rpx; }
.small .wv-cmark { font-size: var(--wv-font-size-mini);  padding: 2rpx 6rpx; }
.mini .wv-cmark { font-size: var(--wv-font-size-mini2);  padding: 2rpx 4rpx; }

.wv-box-btn-group {
  width: 100%;
  display: flex;
  justify-content: space-evenly; 
  align-items: center;
  column-gap: 0;
  row-gap: 0;
  border: solid 1rpx var(--wv-color-secondary);
  border-left: none;
  border-right: none;
  border-bottom: none;
}
.wv-box-btn-group .wv-btn{
  position: relative;
  box-shadow: none !important;
  flex: 1;
  border-radius: 0;
  overflow: visible;
}
.wv-box-btn-group .wv-btn::before {
  position: absolute;
  content: '';
  width: 1rpx;
  height: 100%;
  top: 0;
  right: -1rpx;
  z-index: 1;
  background: var(--wv-color-secondary);
}
.wv-box-btn-group .wv-btn:last-child::before {
  display: none;
}

/* 3D dimension effect for buttons */
.wv-btn.dimension {
  position: relative;
  box-shadow: 0 1px 0px rgba(190, 187, 185, 0.5) inset, 0 1px 0 rgba(252, 252, 252, 0.5);
  background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.25) 0%,
    rgba(255, 255, 255, 0.1) 50%,
    rgba(0, 0, 0, 0.05) 100%
  ) !important;
}

.wv-btn.dimension:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.2);
}

.wv-btn.dimension:active {
  background-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.05) 0%,
    rgba(255, 255, 255, 0.05) 50%,
    rgba(255, 255, 255, 0.15) 100%
  ) !important;
  box-shadow: 0 1px 0px rgba(140, 137, 135, 0.6) inset, 0 1px 0 rgba(252, 252, 252, 0.5);
}

.wv-btn.dimension.disabled, .wv-btn.dimension[disabled] {
  background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.15) 0%,
    rgba(255, 255, 255, 0.05) 50%,
    rgba(0, 0, 0, 0.02) 100%
  ) !important;
  opacity: 0.7;
}

/* Special handling for border style buttons with dimension */
.wv-btn.dimension.border {
  background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.2) 0%,
    rgba(255, 255, 255, 0.05) 50%,
    rgba(0, 0, 0, 0.02) 100%
  ) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.wv-btn.dimension.border:active {
  background-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.02) 0%,
    rgba(255, 255, 255, 0.03) 50%,
    rgba(255, 255, 255, 0.1) 100%
  ) !important;
}