:root {
  /* Positive Button Theme */
  --btn-positive-bg: var(--light-color);
  --btn-positive-color: #fff;
  --btn-positive-border: 1px solid var(--light-color);
  --btn-positive-font-weight: bold;
  --btn-positive-font-size: 1.1em;

  /* Negative/Neutral Button Theme */
  --btn-negative-bg: transparent;
  --btn-negative-color: var(--light-color);
  --btn-negative-border: 1px solid var(--light-color);
  --btn-negative-font-weight: normal;
  --btn-negative-font-size: 1em;
}

/* Popup Positive Action Buttons */
.ohke-popup .btn-yes,
.ohke-popup .btn-ok,
.ohke-popup .btn-continue {
  background-color: var(--btn-positive-bg);
  color: var(--btn-positive-color);
  border: var(--btn-positive-border);
  font-size: var(--btn-positive-font-size);
}

.ohke-popup .btn-yes:hover,
.ohke-popup .btn-ok:hover,
.ohke-popup .btn-continue:hover {
  background-color: color-mix(in srgb, var(--btn-positive-bg) 80%, black);
  border-color: color-mix(in srgb, var(--btn-positive-border) 80%, black);
}

/* Popup Negative/Neutral Action Buttons */
.ohke-popup .btn-no,
.ohke-popup .btn-cancel {
  background-color: var(--btn-negative-bg);
  color: var(--btn-negative-color);
  border: var(--btn-negative-border);
  font-size: var(--btn-negative-font-size);
}

.ohke-popup .btn-no:hover,
.ohke-popup .btn-cancel:hover {
  background-color: rgba(0, 123, 255, 0.1);
}

/* Header Positive Action Buttons (new, edit, save) */
.ohke-header .btn-new,
.ohke-header .btn-edit,
.ohke-header .btn-save {
  background-color: var(--btn-positive-bg);
  color: var(--btn-positive-color);
  border: var(--btn-positive-border);
  font-size: var(--btn-positive-font-size);
}

.ohke-header .btn-new:hover,
.ohke-header .btn-edit:hover,
.ohke-header .btn-save:hover {
  background-color: color-mix(in srgb, var(--btn-positive-bg) 80%, black);
  border-color: color-mix(in srgb, var(--btn-positive-border) 80%, black);
}


/* Header Negative Action Buttons (cancel, remove) */
.ohke-header .btn-cancel,
.ohke-header .btn-remove {
  background-color: var(--btn-negative-bg);
  color: var(--btn-negative-color);
  border: var(--btn-negative-border);
  font-size: var(--btn-negative-font-size);
}

.ohke-header .btn-cancel:hover,
.ohke-header .btn-remove:hover {
  background-color: color-mix(in srgb, var(--btn-negative-bg) 80%, black);
  border-color: color-mix(in srgb, var(--btn-negative-border) 80%, black);
}