.wv-color-primary { color: var(--wv-color-primary); }
.wv-color-secondary { color: var(--wv-color-secondary); }
.wv-color-muted { color: var(--wv-color-muted); }
.wv-color-info { color: var(--wv-color-info); }
.wv-color-success { color: var(--wv-color-success); }
.wv-color-danger { color: var(--wv-color-danger); }
.wv-color-warning { color: var(--wv-color-warning); }
.wv-color-error { color: var(--wv-color-error); }
.wv-color-light { color: var(--wv-color-white); }
.wv-color-dark { color: var(--wv-color-dark); }
.wv-color-poppy { color: var(--wv-color-poppy); }
.wv-color-pink { color: var(--wv-color-pink); }
.wv-color-jade { color: var(--wv-color-jade); }
.wv-color-forest { color: var(--wv-color-forest); }
.wv-color-cute { color: var(--wv-color-cute); }

[class*="wv-theme"] {
  --wv-rgb-theme: var(--wv-color-primary-rgb);
  --wv-rgb-alpha-theme: 1;
  
  --wv-theme-background: rgba(var(--wv-rgb-theme), var(--wv-rgb-alpha-theme));
  --wv-theme-filter: initial;
}

[class*="wv-content"] {
  --wv-rgb-content-theme: var(--wv-color-light-rgb);
  --wv-rgb-alpha-theme: 1;
  
  --wv-theme-color: rgba(var(--wv-rgb-content-theme), var(--wv-rgb-alpha-theme));
  --wv-theme-filter: initial;
}

[class*="wv-theme"]:not(.theme-vars-only) {
  background: var(--wv-theme-background);
  filter: var(--wv-theme-filter);
}

[class*="wv-content"]:not(.theme-vars-only) {
  color: var(--wv-theme-color);
  filter: var(--wv-theme-filter);
}

[class*="wv-theme"].selected, [class*="wv-content"].selected { --wv-theme-filter: brightness(120%); }

[class*="wv-theme"]:not(.inactivable):not(.disabled):not([disabled]):active,
[class*="wv-theme"]:not(.inactivable):not(.disabled):not([disabled]).actived,
[class*="wv-content"]:not(.inactivable):not(.disabled):not([disabled]):active,
[class*="wv-content"]:not(.inactivable):not(.disabled):not([disabled]).actived { 
  --wv-theme-filter: brightness(85%); 
}

[class*="wv-theme"].disabled, [class*="wv-theme"][disabled],
[class*="wv-content"].disabled, [class*="wv-content"][disabled] {
  --wv-theme-filter: grayscale(60%);
}

/* [class*="wv-theme"].disabled, [class*="wv-theme"][disabled] {
  --wv-theme-color: rgba(var(--wv-rgb-content-theme), calc(var(--wv-rgb-alpha-theme) * 0.5));
  --wv-theme-background: linear-gradient(
    rgba(255, 255, 255, calc(var(--wv-rgb-alpha-theme) * 0.5)),
    rgba(255, 255, 255, calc(var(--wv-rgb-alpha-theme) * 0.5))
  ), rgba(var(--wv-rgb-theme), var(--wv-rgb-alpha-theme));
} */

[class*="wv-theme"].border {
  --wv-theme-background: transparent;
  --wv-theme-color: rgba(var(--wv-rgb-theme), var(--wv-rgb-alpha-theme));
  border: solid 1rpx rgba(var(--wv-rgb-theme), var(--wv-rgb-alpha-theme));
}
[class*="wv-theme"].border.selected {
  --wv-theme-background: transparent;
  --wv-theme-color: rgba(var(--wv-rgb-theme), calc(var(--wv-rgb-alpha-theme) * 0.4));
  border: solid 1rpx rgba(var(--wv-rgb-theme), calc(var(--wv-rgb-alpha-theme) * 0.4));
}

/* Border active states that can be disabled with inactivable */
[class*="wv-theme"].border:active,
[class*="wv-theme"].border:not(.inactivable).actived {
  --wv-theme-background: transparent;
  --wv-theme-color: rgba(var(--wv-rgb-theme), calc(var(--wv-rgb-alpha-theme) * 0.6));
  border: solid 1rpx rgba(var(--wv-rgb-theme), calc(var(--wv-rgb-alpha-theme) * 0.6));
}

[class*="wv-theme"].border.disabled, [class*="wv-theme"][disabled].border {
  --wv-theme-background: transparent;
  --wv-theme-color: rgba(var(--wv-rgb-theme), calc(var(--wv-rgb-alpha-theme) * 0.2));
  border: solid 1rpx rgba(var(--wv-rgb-theme), calc(var(--wv-rgb-alpha-theme) * 0.2));
}

[class*="wv-theme"].inverted {
  --wv-theme-background: rgba(var(--wv-rgb-content-theme), var(--wv-rgb-alpha-theme));
  --wv-theme-color: rgba(var(--wv-rgb-theme), var(--wv-rgb-alpha-theme));
}

[class*="wv-theme"].inverted.disabled, [class*="wv-theme"].inverted[disabled] {
  --wv-theme-color: rgba(var(--wv-rgb-theme), calc(var(--wv-rgb-alpha-theme) * 0.5));
  --wv-theme-background: linear-gradient(
    rgba(255, 255, 255, calc(var(--wv-rgb-alpha-theme) * 0.5)),
    rgba(255, 255, 255, calc(var(--wv-rgb-alpha-theme) * 0.5))
  ), rgba(var(--wv-rgb-content-theme), var(--wv-rgb-alpha-theme));
}

[class*="wv-theme"].gradient {
  --wv-theme-background: linear-gradient(to right, rgba(var(--wv-rgb-theme), var(--wv-rgb-alpha-theme)), rgba(var(--wv-rgb-theme), calc(var(--wv-rgb-alpha-theme) * 0.7)));
}

[class*="wv-theme"].disabled.gradient, [class*="wv-theme"][disabled].gradient {
  --wv-theme-color: rgba(var(--wv-rgb-content-theme), calc(var(--wv-rgb-alpha-theme) * 0.5));
  --wv-theme-background: linear-gradient(to right, rgba(var(--wv-rgb-theme), calc(var(--wv-rgb-alpha-theme) * 0.5)), rgba(var(--wv-rgb-theme), calc(var(--wv-rgb-alpha-theme) * 0.5)));
}
[class*="wv-theme"].gradient-v {
  --wv-theme-background: linear-gradient(to bottom, rgba(var(--wv-rgb-theme), var(--wv-rgb-alpha-theme)), rgba(var(--wv-rgb-theme), calc(var(--wv-rgb-alpha-theme) * 0.7)));
}

[class*="wv-theme"].disabled.gradient-v, [class*="wv-theme"][disabled].gradient-v {
  --wv-theme-color: rgba(var(--wv-rgb-content-theme), calc(var(--wv-rgb-alpha-theme) * 0.5));
  --wv-theme-background: linear-gradient(to bottom, rgba(var(--wv-rgb-theme), calc(var(--wv-rgb-alpha-theme) * 0.5)), rgba(var(--wv-rgb-theme), calc(var(--wv-rgb-alpha-theme) * 0.5)));
}

/* ------------------------------------------------------ */
.wv-theme-primary { --wv-rgb-theme: var(--wv-color-primary-rgb); }
.wv-theme-transparent { --wv-rgb-theme: var(--wv-color-light-rgb); --wv-rgb-alpha-theme: 0; }
.wv-theme-secondary { --wv-rgb-theme: var(--wv-color-secondary-rgb); }
.wv-theme-muted { --wv-rgb-theme: var(--wv-color-muted-rgb); }
.wv-theme-info { --wv-rgb-theme: var(--wv-color-info-rgb); }
.wv-theme-success { --wv-rgb-theme: var(--wv-color-success-rgb); }
.wv-theme-danger { --wv-rgb-theme: var(--wv-color-danger-rgb); }
.wv-theme-warning { --wv-rgb-theme: var(--wv-color-warning-rgb); }
.wv-theme-error { --wv-rgb-theme: var(--wv-color-error-rgb); }
.wv-theme-light { --wv-rgb-theme: var(--wv-color-light-rgb); }
.wv-theme-dark { --wv-rgb-theme: var(--wv-color-dark-rgb); }
.wv-theme-heavy { --wv-rgb-theme: var(--wv-color-heavy-rgb); }
.wv-theme-poppy { --wv-rgb-theme: var(--wv-color-poppy-rgb); }
.wv-theme-pink { --wv-rgb-theme: var(--wv-color-pink-rgb); }
.wv-theme-jade { --wv-rgb-theme: var(--wv-color-jade-rgb); }
.wv-theme-forest { --wv-rgb-theme: var(--wv-color-forest-rgb); }
.wv-theme-cute { --wv-rgb-theme: var(--wv-color-cute-rgb); }

.wv-content-primary { --wv-rgb-content-theme: var(--wv-color-primary-rgb); }
.wv-content-transparent { --wv-rgb-content-theme: var(--wv-color-dark-rgb); }
.wv-content-secondary { --wv-rgb-content-theme: var(--wv-color-secondary-rgb); }
.wv-content-muted { --wv-rgb-content-theme: var(--wv-color-muted-rgb); }
.wv-content-info { --wv-rgb-content-theme: var(--wv-color-info-rgb); }
.wv-content-success { --wv-rgb-content-theme: var(--wv-color-success-rgb); }
.wv-content-danger { --wv-rgb-content-theme: var(--wv-color-danger-rgb); }
.wv-content-warning { --wv-rgb-content-theme: var(--wv-color-warning-rgb); }
.wv-content-error { --wv-rgb-content-theme: var(--wv-color-error-rgb); }
.wv-content-light { --wv-rgb-content-theme: var(--wv-color-light-rgb); }
.wv-content-dark { --wv-rgb-content-theme: var(--wv-color-dark-rgb); }
.wv-content-heavy { --wv-rgb-content-theme: var(--wv-color-heavy-rgb); }
.wv-content-poppy { --wv-rgb-content-theme: var(--wv-color-poppy-rgb); }
.wv-content-pink { --wv-rgb-content-theme: var(--wv-color-pink-rgb); }
.wv-content-jade { --wv-rgb-content-theme: var(--wv-color-jade-rgb); }
.wv-content-forest { --wv-rgb-content-theme: var(--wv-color-forest-rgb); }
.wv-content-cute { --wv-rgb-content-theme: var(--wv-color-cute-rgb); }

.wv-alpha-0 { --wv-rgb-alpha-theme: 0; }
.wv-alpha-10 { --wv-rgb-alpha-theme: 0.1; }
.wv-alpha-20 { --wv-rgb-alpha-theme: 0.2; }
.wv-alpha-30 { --wv-rgb-alpha-theme: 0.3; }
.wv-alpha-40 { --wv-rgb-alpha-theme: 0.4; }
.wv-alpha-50 { --wv-rgb-alpha-theme: 0.5; }
.wv-alpha-60 { --wv-rgb-alpha-theme: 0.6; }
.wv-alpha-70 { --wv-rgb-alpha-theme: 0.7; }
.wv-alpha-80 { --wv-rgb-alpha-theme: 0.8; }
.wv-alpha-90 { --wv-rgb-alpha-theme: 0.9; }
.wv-alpha-100 { --wv-rgb-alpha-theme: 1; }