Templates Wiki
Advertisement

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Press Ctrl-F5.
:root {
  --color-oasis-primary: #006cb0;
  --color-oasis-primary-active: #17a5ff;
  --color-oasis-secondary: #3a3a3a;
  --color-oasis-secondary-active: #6d6d6d;
  --color-oasis-text: #3a3a3a;
  --color-oasis-text-active: #6d6d6d;

  --color-jade-primary: #25883d;
  --color-jade-primary-active: #46cd67;
  --color-jade-secondary: #3a3a3a;
  --color-jade-secondary-active: #6d6d6d;
  --color-jade-text: #3a3a3a;
  --color-jade-text-active: #6d6d6d;

  --color-babygirl-primary: #6f027c;
  --color-babygirl-primary-active: #c904e0;
  --color-babygirl-secondary: #3a3a3a;
  --color-babygirl-secondary-active: #6d6d6d;
  --color-babygirl-text: #3a3a3a;
  --color-babygirl-text-active: #6d6d6d;

  --color-carbon-primary: #012e59;
  --color-carbon-primary-active: #0262be;
  --color-carbon-secondary: #d5d4d4;
  --color-carbon-secondary-active: #a3a0a0;
  --color-carbon-text: #d5d4d4;
  --color-carbon-text-active: #a3a0a0;

  --color-rockgarden-primary: #1f5d04;
  --color-rockgarden-primary-active: #40bf08;
  --color-rockgarden-secondary: #3a3a3a;
  --color-rockgarden-secondary-active: #6d6d6d;
  --color-rockgarden-text: #3a3a3a;
  --color-rockgarden-text-active: #6d6d6d;

  --color-opulence-primary: #de1c4e;
  --color-opulence-primary-active: #ed7392;
  --color-opulence-secondary: #3a3a3a;
  --color-opulence-secondary-active: #6d6d6d;
  --color-opulence-text: #3a3a3a;
  --color-opulence-text-active: #6d6d6d;

  --color-bluesteel-primary: #0a3073;
  --color-bluesteel-primary-active: #1257d1;
  --color-bluesteel-secondary: #3a3a3a;
  --color-bluesteel-secondary-active: #6d6d6d;
  --color-bluesteel-text: #3a3a3a;
  --color-bluesteel-text-active: #6d6d6d;

  --color-creamsicle-primary: #fe7e03;
  --color-creamsicle-primary-active: #9a4c01;
  --color-creamsicle-secondary: #3a3a3a;
  --color-creamsicle-secondary-active: #6d6d6d;
  --color-creamsicle-text: #3a3a3a;
  --color-creamsicle-text-active: #6d6d6d;

  --color-plated-primary: #092f71;
  --color-plated-primary-active: #1156cf;
  --color-plated-secondary: #d5d4d4;
  --color-plated-secondary-active: #a3a0a0;
  --color-plated-text: #d5d4d4;
  --color-plated-text-active: #a3a0a0;

  --color-police-primary: #1a52ac;
  --color-police-primary-active: #4984e3;
  --color-police-secondary: #d5d4d4;
  --color-police-secondary-active: #a3a0a0;
  --color-police-text: #d5d4d4;
  --color-police-text-active: #a3a0a0;

  --color-aliencrate-primary: #653f03;
  --color-aliencrate-primary-active: #c87d06;
  --color-aliencrate-secondary: #3a3a3a;
  --color-aliencrate-secondary-active: #6d6d6d;
  --color-aliencrate-text: #3a3a3a;
  --color-aliencrate-text-active: #6d6d6d;

  --color-fandom-primary: #00cdd0;
  --color-fandom-primary-active: #00686a;
  --color-fandom-secondary: #5f7a7b;
  --color-fandom-secondary-active: #94abac;
  --color-fandom-secondary-light: #bed1cf;
  --color-fandom-secondary-light-active: #82a7a3;
  --color-fandom-text: #5f7a7b;
  --color-fandom-text-active: #9da5a5;
  --color-fandom-text-light: #bed1cf;
  --color-fandom-text-light-active: #82a7a3;

  --color-primary-only-primary: #092344;
  --color-primary-only-primary-active: #15519e;
  --color-primary-only-secondary: #092344;
  --color-primary-only-secondary-active: #15519e;
  --color-primary-only-text: #092344;
  --color-primary-only-text-active: #15519e;

  --color-different-secondary-primary: #656e78;
  --color-different-secondary-primary-active: #15519e;
  --color-different-secondary-secondary: #99a1aa;
  --color-different-secondary-secondary-active: #0ee2e8;
  --color-different-secondary-text: #088488;
  --color-different-secondary-text-active: #0ee2e8;
}

/* wds-button-community-central */
.wds-button.wds-is-cc-color {
    color: #fff;
    background: none;
}
.wds-button.wds-is-cc-color:not(.wds-is-text):not(.wds-is-secondary) {
    background-color: var(--color-cc-primary);
}
.wds-button.wds-is-cc-color:not(.wds-is-text):not(.wds-is-secondary):focus:not(:disabled),
.wds-button.wds-is-cc-color:not(.wds-is-text):not(.wds-is-secondary):hover:not(:disabled),
.wds-button.wds-is-cc-color:not(.wds-is-text):not(.wds-is-secondary):active,
.wds-button.wds-is-cc-color:not(.wds-is-text):not(.wds-is-secondary).wds-is-active {
    background-color: var(--color-cc-primary-active);
    border-color: var(--color-cc-primary-active);
}
.wds-button.wds-is-cc-color:not(.wds-is-text) {
    border-color: var(--color-cc-primary);
}
.wds-button.wds-is-cc-color.wds-is-secondary{
    border-color: var(--color-cc-secondary);
    color: var(--color-cc-secondary);
}
.wds-button.wds-is-cc-color.wds-is-secondary:focus:not(:disabled),
.wds-button.wds-is-cc-color.wds-is-secondary:hover:not(:disabled),
.wds-button.wds-is-cc-color.wds-is-secondary:active,
.wds-button.wds-is-cc-color.wds-is-secondary.wds-is-active {
    border-color: var(--color-cc-secondary-active);
    color: var(--color-cc-secondary-active);
}
.wds-button.wds-is-cc-color.wds-is-text{
    color: var(--color-cc-primary-text);
}
.wds-button.wds-is-cc-color.wds-is-text:focus:not(:disabled),
.wds-button.wds-is-cc-color.wds-is-text:hover:not(:disabled),
.wds-button.wds-is-cc-color.wds-is-text:active,
.wds-button.wds-is-cc-color.wds-is-text.wds-is-active{
    color: var(--color-cc-primary-text-active);
}

/* wds-button-oasis */
.wds-button.wds-is-oasis-color {
    color: #fff;
    background: none;
}
.wds-button.wds-is-oasis-color:not(.wds-is-text):not(.wds-is-secondary) {
    background-color: var(--color-oasis-primary);
}
.wds-button.wds-is-oasis-color:not(.wds-is-text):not(.wds-is-secondary):focus:not(:disabled),
.wds-button.wds-is-oasis-color:not(.wds-is-text):not(.wds-is-secondary):hover:not(:disabled),
.wds-button.wds-is-oasis-color:not(.wds-is-text):not(.wds-is-secondary):active,
.wds-button.wds-is-oasis-color:not(.wds-is-text):not(.wds-is-secondary).wds-is-active {
    background-color: var(--color-oasis-primary-active);
    border-color: var(--color-oasis-primary-active);
}
.wds-button.wds-is-oasis-color:not(.wds-is-text) {
    border-color: var(--color-oasis-primary);
}
.wds-button.wds-is-oasis-color.wds-is-secondary{
    border-color: var(--color-oasis-secondary);
    color: var(--color-oasis-secondary);
}
.wds-button.wds-is-oasis-color.wds-is-secondary:focus:not(:disabled),
.wds-button.wds-is-oasis-color.wds-is-secondary:hover:not(:disabled),
.wds-button.wds-is-oasis-color.wds-is-secondary:active,
.wds-button.wds-is-oasis-color.wds-is-secondary.wds-is-active {
    border-color: var(--color-oasis-secondary-active);
    color: var(--color-oasis-secondary-active);
}
.wds-button.wds-is-oasis-color.wds-is-text{
    color: var(--color-oasis-primary-text);
}
.wds-button.wds-is-oasis-color.wds-is-text:focus:not(:disabled),
.wds-button.wds-is-oasis-color.wds-is-text:hover:not(:disabled),
.wds-button.wds-is-oasis-color.wds-is-text:active,
.wds-button.wds-is-oasis-color.wds-is-text.wds-is-active{
    color: var(--color-oasis-primary-text-active);
}

/* wds-button-jade */
.wds-button.wds-is-jade-color {
    color: #fff;
    background: none;
}
.wds-button.wds-is-jade-color:not(.wds-is-text):not(.wds-is-secondary) {
    background-color: var(--color-jade-primary);
}
.wds-button.wds-is-jade-color:not(.wds-is-text):not(.wds-is-secondary):focus:not(:disabled),
.wds-button.wds-is-jade-color:not(.wds-is-text):not(.wds-is-secondary):hover:not(:disabled),
.wds-button.wds-is-jade-color:not(.wds-is-text):not(.wds-is-secondary):active,
.wds-button.wds-is-jade-color:not(.wds-is-text):not(.wds-is-secondary).wds-is-active {
    background-color: var(--color-jade-primary-active);
    border-color: var(--color-jade-primary-active);
}
.wds-button.wds-is-jade-color:not(.wds-is-text) {
    border-color: var(--color-jade-primary);
}
.wds-button.wds-is-jade-color.wds-is-secondary{
    border-color: var(--color-jade-secondary);
    color: var(--color-jade-secondary);
}
.wds-button.wds-is-jade-color.wds-is-secondary:focus:not(:disabled),
.wds-button.wds-is-jade-color.wds-is-secondary:hover:not(:disabled),
.wds-button.wds-is-jade-color.wds-is-secondary:active,
.wds-button.wds-is-jade-color.wds-is-secondary.wds-is-active {
    border-color: var(--color-jade-secondary-active);
    color: var(--color-jade-secondary-active);
}
.wds-button.wds-is-jade-color.wds-is-text{
    color: var(--color-jade-primary-text);
}
.wds-button.wds-is-jade-color.wds-is-text:focus:not(:disabled),
.wds-button.wds-is-jade-color.wds-is-text:hover:not(:disabled),
.wds-button.wds-is-jade-color.wds-is-text:active,
.wds-button.wds-is-jade-color.wds-is-text.wds-is-active{
    color: var(--color-jade-primary-text-active);
}

/* wds-button-babygirl */
.wds-button.wds-is-babygirl-color {
    color: #fff;
    background: none;
}
.wds-button.wds-is-babygirl-color:not(.wds-is-text):not(.wds-is-secondary) {
    background-color: var(--color-babygirl-primary);
}
.wds-button.wds-is-babygirl-color:not(.wds-is-text):not(.wds-is-secondary):focus:not(:disabled),
.wds-button.wds-is-babygirl-color:not(.wds-is-text):not(.wds-is-secondary):hover:not(:disabled),
.wds-button.wds-is-babygirl-color:not(.wds-is-text):not(.wds-is-secondary):active,
.wds-button.wds-is-babygirl-color:not(.wds-is-text):not(.wds-is-secondary).wds-is-active {
    background-color: var(--color-babygirl-primary-active);
    border-color: var(--color-babygirl-primary-active);
}
.wds-button.wds-is-babygirl-color:not(.wds-is-text) {
    border-color: var(--color-babygirl-primary);
}
.wds-button.wds-is-babygirl-color.wds-is-secondary{
    border-color: var(--color-babygirl-secondary);
    color: var(--color-babygirl-secondary);
}
.wds-button.wds-is-babygirl-color.wds-is-secondary:focus:not(:disabled),
.wds-button.wds-is-babygirl-color.wds-is-secondary:hover:not(:disabled),
.wds-button.wds-is-babygirl-color.wds-is-secondary:active,
.wds-button.wds-is-babygirl-color.wds-is-secondary.wds-is-active {
    border-color: var(--color-babygirl-secondary-active);
    color: var(--color-babygirl-secondary-active);
}
.wds-button.wds-is-babygirl-color.wds-is-text{
    color: var(--color-babygirl-primary-text);
}
.wds-button.wds-is-babygirl-color.wds-is-text:focus:not(:disabled),
.wds-button.wds-is-babygirl-color.wds-is-text:hover:not(:disabled),
.wds-button.wds-is-babygirl-color.wds-is-text:active,
.wds-button.wds-is-babygirl-color.wds-is-text.wds-is-active{
    color: var(--color-babygirl-primary-text-active);
}

/* wds-button-carbon */
.wds-button.wds-is-carbon-color {
    color: #fff;
    background: none;
}
.wds-button.wds-is-carbon-color:not(.wds-is-text):not(.wds-is-secondary) {
    background-color: var(--color-carbon-primary);
}
.wds-button.wds-is-carbon-color:not(.wds-is-text):not(.wds-is-secondary):focus:not(:disabled),
.wds-button.wds-is-carbon-color:not(.wds-is-text):not(.wds-is-secondary):hover:not(:disabled),
.wds-button.wds-is-carbon-color:not(.wds-is-text):not(.wds-is-secondary):active,
.wds-button.wds-is-carbon-color:not(.wds-is-text):not(.wds-is-secondary).wds-is-active {
    background-color: var(--color-carbon-primary-active);
    border-color: var(--color-carbon-primary-active);
}
.wds-button.wds-is-carbon-color:not(.wds-is-text) {
    border-color: var(--color-carbon-primary);
}
.wds-button.wds-is-carbon-color.wds-is-secondary{
    border-color: var(--color-carbon-secondary);
    color: var(--color-carbon-secondary);
}
.wds-button.wds-is-carbon-color.wds-is-secondary:focus:not(:disabled),
.wds-button.wds-is-carbon-color.wds-is-secondary:hover:not(:disabled),
.wds-button.wds-is-carbon-color.wds-is-secondary:active,
.wds-button.wds-is-carbon-color.wds-is-secondary.wds-is-active {
    border-color: var(--color-carbon-secondary-active);
    color: var(--color-carbon-secondary-active);
}
.wds-button.wds-is-carbon-color.wds-is-text{
    color: var(--color-carbon-primary-text);
}
.wds-button.wds-is-carbon-color.wds-is-text:focus:not(:disabled),
.wds-button.wds-is-carbon-color.wds-is-text:hover:not(:disabled),
.wds-button.wds-is-carbon-color.wds-is-text:active,
.wds-button.wds-is-carbon-color.wds-is-text.wds-is-active{
    color: var(--color-carbon-primary-text-active);
}

/* wds-button-rockgarden */
.wds-button.wds-is-rockgarden-color {
    color: #fff;
    background: none;
}
.wds-button.wds-is-rockgarden-color:not(.wds-is-text):not(.wds-is-secondary) {
    background-color: var(--color-rockgarden-primary);
}
.wds-button.wds-is-rockgarden-color:not(.wds-is-text):not(.wds-is-secondary):focus:not(:disabled),
.wds-button.wds-is-rockgarden-color:not(.wds-is-text):not(.wds-is-secondary):hover:not(:disabled),
.wds-button.wds-is-rockgarden-color:not(.wds-is-text):not(.wds-is-secondary):active,
.wds-button.wds-is-rockgarden-color:not(.wds-is-text):not(.wds-is-secondary).wds-is-active {
    background-color: var(--color-rockgarden-primary-active);
    border-color: var(--color-rockgarden-primary-active);
}
.wds-button.wds-is-rockgarden-color:not(.wds-is-text) {
    border-color: var(--color-rockgarden-primary);
}
.wds-button.wds-is-rockgarden-color.wds-is-secondary{
    border-color: var(--color-rockgarden-secondary);
    color: var(--color-rockgarden-secondary);
}
.wds-button.wds-is-rockgarden-color.wds-is-secondary:focus:not(:disabled),
.wds-button.wds-is-rockgarden-color.wds-is-secondary:hover:not(:disabled),
.wds-button.wds-is-rockgarden-color.wds-is-secondary:active,
.wds-button.wds-is-rockgarden-color.wds-is-secondary.wds-is-active {
    border-color: var(--color-rockgarden-secondary-active);
    color: var(--color-rockgarden-secondary-active);
}
.wds-button.wds-is-rockgarden-color.wds-is-text{
    color: var(--color-rockgarden-primary-text);
}
.wds-button.wds-is-rockgarden-color.wds-is-text:focus:not(:disabled),
.wds-button.wds-is-rockgarden-color.wds-is-text:hover:not(:disabled),
.wds-button.wds-is-rockgarden-color.wds-is-text:active,
.wds-button.wds-is-rockgarden-color.wds-is-text.wds-is-active{
    color: var(--color-rockgarden-primary-text-active);
}

/* wds-button-opulence */
/* wds-button-opulence */
.wds-button.wds-is-opulence-color {
    color: #fff;
    background: none;
}
.wds-button.wds-is-opulence-color:not(.wds-is-text):not(.wds-is-secondary) {
    background-color: var(--color-opulence-primary);
}
.wds-button.wds-is-opulence-color:not(.wds-is-text):not(.wds-is-secondary):focus:not(:disabled),
.wds-button.wds-is-opulence-color:not(.wds-is-text):not(.wds-is-secondary):hover:not(:disabled),
.wds-button.wds-is-opulence-color:not(.wds-is-text):not(.wds-is-secondary):active,
.wds-button.wds-is-opulence-color:not(.wds-is-text):not(.wds-is-secondary).wds-is-active {
    background-color: var(--color-opulence-primary-active);
    border-color: var(--color-opulence-primary-active);
}
.wds-button.wds-is-opulence-color:not(.wds-is-text) {
    border-color: var(--color-opulence-primary);
}
.wds-button.wds-is-opulence-color.wds-is-secondary{
    border-color: var(--color-opulence-secondary);
    color: var(--color-opulence-secondary);
}
.wds-button.wds-is-opulence-color.wds-is-secondary:focus:not(:disabled),
.wds-button.wds-is-opulence-color.wds-is-secondary:hover:not(:disabled),
.wds-button.wds-is-opulence-color.wds-is-secondary:active,
.wds-button.wds-is-opulence-color.wds-is-secondary.wds-is-active {
    border-color: var(--color-opulence-secondary-active);
    color: var(--color-opulence-secondary-active);
}
.wds-button.wds-is-opulence-color.wds-is-text{
    color: var(--color-opulence-primary-text);
}
.wds-button.wds-is-opulence-color.wds-is-text:focus:not(:disabled),
.wds-button.wds-is-opulence-color.wds-is-text:hover:not(:disabled),
.wds-button.wds-is-opulence-color.wds-is-text:active,
.wds-button.wds-is-opulence-color.wds-is-text.wds-is-active{
    color: var(--color-opulence-primary-text-active);
}

/* wds-button-bluesteel */
/* wds-button-bluesteel */
.wds-button.wds-is-bluesteel-color {
    color: #fff;
    background: none;
}
.wds-button.wds-is-bluesteel-color:not(.wds-is-text):not(.wds-is-secondary) {
    background-color: var(--color-bluesteel-primary);
}
.wds-button.wds-is-bluesteel-color:not(.wds-is-text):not(.wds-is-secondary):focus:not(:disabled),
.wds-button.wds-is-bluesteel-color:not(.wds-is-text):not(.wds-is-secondary):hover:not(:disabled),
.wds-button.wds-is-bluesteel-color:not(.wds-is-text):not(.wds-is-secondary):active,
.wds-button.wds-is-bluesteel-color:not(.wds-is-text):not(.wds-is-secondary).wds-is-active {
    background-color: var(--color-bluesteel-primary-active);
    border-color: var(--color-bluesteel-primary-active);
}
.wds-button.wds-is-bluesteel-color:not(.wds-is-text) {
    border-color: var(--color-bluesteel-primary);
}
.wds-button.wds-is-bluesteel-color.wds-is-secondary{
    border-color: var(--color-bluesteel-secondary);
    color: var(--color-bluesteel-secondary);
}
.wds-button.wds-is-bluesteel-color.wds-is-secondary:focus:not(:disabled),
.wds-button.wds-is-bluesteel-color.wds-is-secondary:hover:not(:disabled),
.wds-button.wds-is-bluesteel-color.wds-is-secondary:active,
.wds-button.wds-is-bluesteel-color.wds-is-secondary.wds-is-active {
    border-color: var(--color-bluesteel-secondary-active);
    color: var(--color-bluesteel-secondary-active);
}
.wds-button.wds-is-bluesteel-color.wds-is-text{
    color: var(--color-bluesteel-primary-text);
}
.wds-button.wds-is-bluesteel-color.wds-is-text:focus:not(:disabled),
.wds-button.wds-is-bluesteel-color.wds-is-text:hover:not(:disabled),
.wds-button.wds-is-bluesteel-color.wds-is-text:active,
.wds-button.wds-is-bluesteel-color.wds-is-text.wds-is-active{
    color: var(--color-bluesteel-primary-text-active);
}

/* wds-button-creamsicle */
.wds-button.wds-is-creamsicle-color {
    color: #fff;
    background: none;
}
.wds-button.wds-is-creamsicle-color:not(.wds-is-text):not(.wds-is-secondary) {
    background-color: var(--color-creamsicle-primary);
}
.wds-button.wds-is-creamsicle-color:not(.wds-is-text):not(.wds-is-secondary):focus:not(:disabled),
.wds-button.wds-is-creamsicle-color:not(.wds-is-text):not(.wds-is-secondary):hover:not(:disabled),
.wds-button.wds-is-creamsicle-color:not(.wds-is-text):not(.wds-is-secondary):active,
.wds-button.wds-is-creamsicle-color:not(.wds-is-text):not(.wds-is-secondary).wds-is-active {
    background-color: var(--color-creamsicle-primary-active);
    border-color: var(--color-creamsicle-primary-active);
}
.wds-button.wds-is-creamsicle-color:not(.wds-is-text) {
    border-color: var(--color-creamsicle-primary);
}
.wds-button.wds-is-creamsicle-color.wds-is-secondary{
    border-color: var(--color-creamsicle-secondary);
    color: var(--color-creamsicle-secondary);
}
.wds-button.wds-is-creamsicle-color.wds-is-secondary:focus:not(:disabled),
.wds-button.wds-is-creamsicle-color.wds-is-secondary:hover:not(:disabled),
.wds-button.wds-is-creamsicle-color.wds-is-secondary:active,
.wds-button.wds-is-creamsicle-color.wds-is-secondary.wds-is-active {
    border-color: var(--color-creamsicle-secondary-active);
    color: var(--color-creamsicle-secondary-active);
}
.wds-button.wds-is-creamsicle-color.wds-is-text{
    color: var(--color-creamsicle-primary-text);
}
.wds-button.wds-is-creamsicle-color.wds-is-text:focus:not(:disabled),
.wds-button.wds-is-creamsicle-color.wds-is-text:hover:not(:disabled),
.wds-button.wds-is-creamsicle-color.wds-is-text:active,
.wds-button.wds-is-creamsicle-color.wds-is-text.wds-is-active{
    color: var(--color-creamsicle-primary-text-active);
}

/* wds-button-plated */
.wds-button.wds-is-plated-color {
    color: #fff;
    background: none;
}
.wds-button.wds-is-plated-color:not(.wds-is-text):not(.wds-is-secondary) {
    background-color: var(--color-plated-primary);
}
.wds-button.wds-is-plated-color:not(.wds-is-text):not(.wds-is-secondary):focus:not(:disabled),
.wds-button.wds-is-plated-color:not(.wds-is-text):not(.wds-is-secondary):hover:not(:disabled),
.wds-button.wds-is-plated-color:not(.wds-is-text):not(.wds-is-secondary):active,
.wds-button.wds-is-plated-color:not(.wds-is-text):not(.wds-is-secondary).wds-is-active {
    background-color: var(--color-plated-primary-active);
    border-color: var(--color-plated-primary-active);
}
.wds-button.wds-is-plated-color:not(.wds-is-text) {
    border-color: var(--color-plated-primary);
}
.wds-button.wds-is-plated-color.wds-is-secondary{
    border-color: var(--color-plated-secondary);
    color: var(--color-plated-secondary);
}
.wds-button.wds-is-plated-color.wds-is-secondary:focus:not(:disabled),
.wds-button.wds-is-plated-color.wds-is-secondary:hover:not(:disabled),
.wds-button.wds-is-plated-color.wds-is-secondary:active,
.wds-button.wds-is-plated-color.wds-is-secondary.wds-is-active {
    border-color: var(--color-plated-secondary-active);
    color: var(--color-plated-secondary-active);
}
.wds-button.wds-is-plated-color.wds-is-text{
    color: var(--color-plated-primary-text);
}
.wds-button.wds-is-plated-color.wds-is-text:focus:not(:disabled),
.wds-button.wds-is-plated-color.wds-is-text:hover:not(:disabled),
.wds-button.wds-is-plated-color.wds-is-text:active,
.wds-button.wds-is-plated-color.wds-is-text.wds-is-active{
    color: var(--color-plated-primary-text-active);
}

/* wds-button-police */
.wds-button.wds-is-police-color {
    color: #fff;
    background: none;
}
.wds-button.wds-is-police-color:not(.wds-is-text):not(.wds-is-secondary) {
    background-color: var(--color-police-primary);
}
.wds-button.wds-is-police-color:not(.wds-is-text):not(.wds-is-secondary):focus:not(:disabled),
.wds-button.wds-is-police-color:not(.wds-is-text):not(.wds-is-secondary):hover:not(:disabled),
.wds-button.wds-is-police-color:not(.wds-is-text):not(.wds-is-secondary):active,
.wds-button.wds-is-police-color:not(.wds-is-text):not(.wds-is-secondary).wds-is-active {
    background-color: var(--color-police-primary-active);
    border-color: var(--color-police-primary-active);
}
.wds-button.wds-is-police-color:not(.wds-is-text) {
    border-color: var(--color-police-primary);
}
.wds-button.wds-is-police-color.wds-is-secondary{
    border-color: var(--color-police-secondary);
    color: var(--color-police-secondary);
}
.wds-button.wds-is-police-color.wds-is-secondary:focus:not(:disabled),
.wds-button.wds-is-police-color.wds-is-secondary:hover:not(:disabled),
.wds-button.wds-is-police-color.wds-is-secondary:active,
.wds-button.wds-is-police-color.wds-is-secondary.wds-is-active {
    border-color: var(--color-police-secondary-active);
    color: var(--color-police-secondary-active);
}
.wds-button.wds-is-police-color.wds-is-text{
    color: var(--color-police-primary-text);
}
.wds-button.wds-is-police-color.wds-is-text:focus:not(:disabled),
.wds-button.wds-is-police-color.wds-is-text:hover:not(:disabled),
.wds-button.wds-is-police-color.wds-is-text:active,
.wds-button.wds-is-police-color.wds-is-text.wds-is-active{
    color: var(--color-police-primary-text-active);
}

/* wds-button-aliencrate */
.wds-button.wds-is-aliencrate-color {
    color: #fff;
    background: none;
}
.wds-button.wds-is-aliencrate-color:not(.wds-is-text):not(.wds-is-secondary) {
    background-color: var(--color-aliencrate-primary);
}
.wds-button.wds-is-aliencrate-color:not(.wds-is-text):not(.wds-is-secondary):focus:not(:disabled),
.wds-button.wds-is-aliencrate-color:not(.wds-is-text):not(.wds-is-secondary):hover:not(:disabled),
.wds-button.wds-is-aliencrate-color:not(.wds-is-text):not(.wds-is-secondary):active,
.wds-button.wds-is-aliencrate-color:not(.wds-is-text):not(.wds-is-secondary).wds-is-active {
    background-color: var(--color-aliencrate-primary-active);
    border-color: var(--color-aliencrate-primary-active);
}
.wds-button.wds-is-aliencrate-color:not(.wds-is-text) {
    border-color: var(--color-aliencrate-primary);
}
.wds-button.wds-is-aliencrate-color.wds-is-secondary{
    border-color: var(--color-aliencrate-secondary);
    color: var(--color-aliencrate-secondary);
}
.wds-button.wds-is-aliencrate-color.wds-is-secondary:focus:not(:disabled),
.wds-button.wds-is-aliencrate-color.wds-is-secondary:hover:not(:disabled),
.wds-button.wds-is-aliencrate-color.wds-is-secondary:active,
.wds-button.wds-is-aliencrate-color.wds-is-secondary.wds-is-active {
    border-color: var(--color-aliencrate-secondary-active);
    color: var(--color-aliencrate-secondary-active);
}
.wds-button.wds-is-aliencrate-color.wds-is-text{
    color: var(--color-aliencrate-primary-text);
}
.wds-button.wds-is-aliencrate-color.wds-is-text:focus:not(:disabled),
.wds-button.wds-is-aliencrate-color.wds-is-text:hover:not(:disabled),
.wds-button.wds-is-aliencrate-color.wds-is-text:active,
.wds-button.wds-is-aliencrate-color.wds-is-text.wds-is-active{
    color: var(--color-aliencrate-primary-text-active);
}

/* wds-button-fandom */
.wds-button.wds-is-fandom-color {
    color: #fff;
    background: none;
}
.wds-button.wds-is-fandom-color:not(.wds-is-text):not(.wds-is-secondary) {
    background-color: var(--color-fandom-primary);
}
.wds-button.wds-is-fandom-color:not(.wds-is-text):not(.wds-is-secondary):focus:not(:disabled),
.wds-button.wds-is-fandom-color:not(.wds-is-text):not(.wds-is-secondary):hover:not(:disabled),
.wds-button.wds-is-fandom-color:not(.wds-is-text):not(.wds-is-secondary):active,
.wds-button.wds-is-fandom-color:not(.wds-is-text):not(.wds-is-secondary).wds-is-active {
    background-color: var(--color-fandom-primary-active);
    border-color: var(--color-fandom-primary-active);
}
.wds-button.wds-is-fandom-color:not(.wds-is-text) {
    border-color: var(--color-fandom-primary);
}
.wds-button.wds-is-fandom-color.wds-is-secondary{
    border-color: var(--color-fandom-secondary);
    color: var(--color-fandom-secondary);
}
.wds-button.wds-is-fandom-color.wds-is-secondary:focus:not(:disabled),
.wds-button.wds-is-fandom-color.wds-is-secondary:hover:not(:disabled),
.wds-button.wds-is-fandom-color.wds-is-secondary:active,
.wds-button.wds-is-fandom-color.wds-is-secondary.wds-is-active {
    border-color: var(--color-fandom-secondary-active);
    color: var(--color-fandom-secondary-active);
}
.wds-button.wds-is-fandom-color.wds-is-text{
    color: var(--color-fandom-primary-text);
}
.wds-button.wds-is-fandom-color.wds-is-text:focus:not(:disabled),
.wds-button.wds-is-fandom-color.wds-is-text:hover:not(:disabled),
.wds-button.wds-is-fandom-color.wds-is-text:active,
.wds-button.wds-is-fandom-color.wds-is-text.wds-is-active{
    color: var(--color-fandom-primary-text-active);
}

.wds-button.wds-is-fandom-color.wds-is-secondary.wds-is-light,
.wds-button.wds-is-fandom-color.wds-is-text.wds-is-light {
    color: var(--color-fandom-secondary-light);
}
.wds-button.wds-is-fandom-color.wds-is-secondary.wds-is-light:not(.wds-is-text):not(.wds-is-secondary),
.wds-button.wds-is-fandom-color.wds-is-text.wds-is-light:not(.wds-is-text):not(.wds-is-secondary) {

    background-color: var(--color-fandom-secondary-light);
}
.wds-button.wds-is-fandom-color.wds-is-secondary.wds-is-light:not(.wds-is-text):not(.wds-is-secondary):focus:not(:disabled),
.wds-button.wds-is-fandom-color.wds-is-secondary.wds-is-light:not(.wds-is-text):not(.wds-is-secondary):hover:not(:disabled),
.wds-button.wds-is-fandom-color.wds-is-secondary.wds-is-light:not(.wds-is-text):not(.wds-is-secondary):active,
.wds-button.wds-is-fandom-color.wds-is-secondary.wds-is-light:not(.wds-is-text):not(.wds-is-secondary).wds-is-active {
    background-color: var(--color-fandom-secondary-light-active);
    background-color: var(--color-fandom-secondary-light-active);
}
.wds-button.wds-is-fandom-color.wds-is-secondary.wds-is-light:not(.wds-is-text),
.wds-button.wds-is-fandom-color.wds-is-text.wds-is-light:not(.wds-is-text) {
    border-color: var(--color-fandom-secondary-light);
}
.wds-button.wds-is-fandom-color.wds-is-secondary.wds-is-light,
.wds-button.wds-is-fandom-color.wds-is-text.wds-is-secondary.wds-is-light {
    border-color: var(--color-fandom-secondary-light);
    color: var(--color-fandom-secondary-light);
}
.wds-button.wds-is-fandom-color.wds-is-secondary.wds-is-light:focus:not(:disabled),
.wds-button.wds-is-fandom-color.wds-is-secondary.wds-is-light:hover:not(:disabled),
.wds-button.wds-is-fandom-color.wds-is-secondary.wds-is-light:active,
.wds-button.wds-is-fandom-color.wds-is-secondary.wds-is-light.wds-is-active,
.wds-button.wds-is-fandom-color.wds-is-text.wds-is-secondary.wds-is-light:focus:not(:disabled),
.wds-button.wds-is-fandom-color.wds-is-text.wds-is-secondary.wds-is-light:hover:not(:disabled),
.wds-button.wds-is-fandom-color.wds-is-text.wds-is-secondary.wds-is-light:active,
.wds-button.wds-is-fandom-color.wds-is-text.wds-is-secondary.wds-is-light.wds-is-active {
    border-color: var(--color-fandom-secondary-light-active);
    color: var(--color-fandom-secondary-light-active);
}

/* wds-button-primary-only */
.wds-button.wds-is-primary-only-color {
    color: #fff;
    background: none;
}
.wds-button.wds-is-primary-only-color:not(.wds-is-text):not(.wds-is-secondary) {
    background-color: var(--color-primary-only-primary);
}
.wds-button.wds-is-primary-only-color:not(.wds-is-text):not(.wds-is-secondary):focus:not(:disabled),
.wds-button.wds-is-primary-only-color:not(.wds-is-text):not(.wds-is-secondary):hover:not(:disabled),
.wds-button.wds-is-primary-only-color:not(.wds-is-text):not(.wds-is-secondary):active,
.wds-button.wds-is-primary-only-color:not(.wds-is-text):not(.wds-is-secondary).wds-is-active {
    background-color: var(--color-primary-only-primary-active);
    border-color: var(--color-primary-only-primary-active);
}
.wds-button.wds-is-primary-only-color:not(.wds-is-text) {
    border-color: var(--color-primary-only-primary);
}
.wds-button.wds-is-primary-only-color.wds-is-secondary{
    border-color: var(--color-primary-only-secondary);
    color: var(--color-primary-only-secondary);
}
.wds-button.wds-is-primary-only-color.wds-is-secondary:focus:not(:disabled),
.wds-button.wds-is-primary-only-color.wds-is-secondary:hover:not(:disabled),
.wds-button.wds-is-primary-only-color.wds-is-secondary:active,
.wds-button.wds-is-primary-only-color.wds-is-secondary.wds-is-active {
    border-color: var(--color-primary-only-secondary-active);
    color: var(--color-primary-only-secondary-active);
}
.wds-button.wds-is-primary-only-color.wds-is-text{
    color: var(--color-primary-only-primary-text);
}
.wds-button.wds-is-primary-only-color.wds-is-text:focus:not(:disabled),
.wds-button.wds-is-primary-only-color.wds-is-text:hover:not(:disabled),
.wds-button.wds-is-primary-only-color.wds-is-text:active,
.wds-button.wds-is-primary-only-color.wds-is-text.wds-is-active{
    color: var(--color-primary-only-primary-text-active);
}

/* wds-button-different-secondary */
.wds-button.wds-is-different-secondary-color {
    color: #fff;
    background: none;
}
.wds-button.wds-is-different-secondary-color:not(.wds-is-text):not(.wds-is-secondary) {
    background-color: var(--color-different-secondary-primary);
}
.wds-button.wds-is-different-secondary-color:not(.wds-is-text):not(.wds-is-secondary):focus:not(:disabled),
.wds-button.wds-is-different-secondary-color:not(.wds-is-text):not(.wds-is-secondary):hover:not(:disabled),
.wds-button.wds-is-different-secondary-color:not(.wds-is-text):not(.wds-is-secondary):active,
.wds-button.wds-is-different-secondary-color:not(.wds-is-text):not(.wds-is-secondary).wds-is-active {
    background-color: var(--color-different-secondary-primary-active);
    border-color: var(--color-different-secondary-primary-active);
}
.wds-button.wds-is-different-secondary-color:not(.wds-is-text) {
    border-color: var(--color-different-secondary-primary);
}
.wds-button.wds-is-different-secondary-color.wds-is-secondary{
    border-color: var(--color-different-secondary-secondary);
    color: var(--color-different-secondary-secondary);
}
.wds-button.wds-is-different-secondary-color.wds-is-secondary:focus:not(:disabled),
.wds-button.wds-is-different-secondary-color.wds-is-secondary:hover:not(:disabled),
.wds-button.wds-is-different-secondary-color.wds-is-secondary:active,
.wds-button.wds-is-different-secondary-color.wds-is-secondary.wds-is-active {
    border-color: var(--color-different-secondary-secondary-active);
    color: var(--color-different-secondary-secondary-active);
}
.wds-button.wds-is-different-secondary-color.wds-is-text{
    color: var(--color-different-secondary-primary-text);
}
.wds-button.wds-is-different-secondary-color.wds-is-text:focus:not(:disabled),
.wds-button.wds-is-different-secondary-color.wds-is-text:hover:not(:disabled),
.wds-button.wds-is-different-secondary-color.wds-is-text:active,
.wds-button.wds-is-different-secondary-color.wds-is-text.wds-is-active{
    color: var(--color-different-secondary-primary-text-active);
}
Advertisement