/*---------------
     Warning
----------------*/

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

/*-----------------
  Subtle Warning
------------------*/

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