/*---------------
    Positive
----------------*/

/* Standard */
.positive.buttons .button,
.positive.button {
  background-color: var(--button-positive-color);
  color: var(--button-positive-text-color);
  text-shadow: var(--button-positive-text-shadow);
  background-image: var(--button-positive-background-image);
}
.positive.button {
  box-shadow: var(--button-positive-box-shadow);
}
.positive.buttons .button:hover,
.positive.button:hover {
  background-color: var(--button-positive-color-hover);
  color: var(--button-positive-text-color);
  text-shadow: var(--button-positive-text-shadow);
  box-shadow: var(--button-hover-box-shadow);
}
.positive.buttons .button:focus,
.positive.button:focus {
  background-color: var(--button-positive-color-focus);
  color: var(--button-positive-text-color);
  text-shadow: var(--button-positive-text-shadow);
  box-shadow: var(--button-focus-box-shadow);
}
.positive.buttons .button.pressed,
.positive.button.pressed,
.positive.buttons .button:active,
.positive.button:active {
  background-color: var(--button-positive-color-down);
  color: var(--button-positive-text-color);
  text-shadow: var(--button-positive-text-shadow);
  box-shadow: var(--button-pressed-box-shadow);
}
.positive.buttons .active.button,
.positive.buttons .active.button:active,
.positive.active.button,
.positive.button .active.button:active {
  background-color: var(--button-positive-color-active);
  color: var(--button-positive-text-color);
  text-shadow: var(--button-positive-text-shadow);
  box-shadow: var(--button-active-box-shadow);
}
/*-----------------
  Subtle Positive
------------------*/

.subtle-positive.buttons .button,
.subtle-positive.button {
  background-color: var(--button-subtle-positive-color);
  color: var(--button-subtle-positive-text-color);
  text-shadow: var(--button-subtle-positive-text-shadow);
  background-image: var(--button-subtle-positive-background-image);
}
.subtle-positive.button {
  box-shadow: var(--button-subtle-positive-box-shadow);
}
.subtle-positive.buttons .button:hover,
.subtle-positive.button:hover {
  background-color: var(--button-subtle-positive-color-hover);
  color: var(--button-subtle-positive-text-color);
  text-shadow: var(--button-subtle-positive-text-shadow);
  box-shadow: var(--button-hover-box-shadow);
}
.subtle-positive.buttons .button:focus,
.subtle-positive.button:focus {
  background-color: var(--button-subtle-positive-color-focus);
  color: var(--button-subtle-positive-text-color);
  text-shadow: var(--button-subtle-positive-text-shadow);
  box-shadow: var(--button-focus-box-shadow);
}
.subtle-positive.buttons .button.pressed,
.subtle-positive.button.pressed,
.subtle-positive.buttons .button:active,
.subtle-positive.button:active {
  background-color: var(--button-subtle-positive-color-down);
  color: var(--button-subtle-positive-text-color);
  text-shadow: var(--button-subtle-positive-text-shadow);
  box-shadow: var(--button-pressed-box-shadow);
}
.subtle-positive.buttons .active.button,
.subtle-positive.active.button,
.subtle-positive.buttons .active.button:active,
.subtle-positive.button .active.button:active {
  background-color: var(--button-subtle-positive-color-active);
  background-image: var(--button-subtle-positive-background-image);
  color: var(--button-subtle-positive-text-color);
  text-shadow: var(--button-subtle-positive-text-shadow);
  box-shadow: var(--button-active-box-shadow);
}
.subtle-positive.buttons .button > .icon,
.subtle-positive.button > .icon {
  color: var(--button-subtle-positive-text-color);
}