/* Button styles based on CSS variables */
.custom-button {
  /* Base button properties */
  text-direction: var(--btn-text-direction, ltr);
  text-align: var(--btn-text-align, center);
  text-decoration: var(--btn-text-decoration, none);
  font-weight: var(--btn-text-font-weight, 400);
  font-family: var(--btn-text-font-family, Roboto, "Roboto Fallback");
  color: var(--btn-text-color, rgb(83, 86, 90));
  background-color: var(--btn-bg-color, rgb(239, 194, 52));
  
  /* Add padding for better spacing around text */
  padding: 4px 20px;
  
  /* Border properties */
  border-width: var(--btn-border-width, 2px);
  border-style: solid;
  border-color: var(--btn-border-color, rgb(239, 194, 52));
  border-radius: var(--btn-border-radius, 30px);
  
  /* Individual border properties */
  border-top-width: var(--btn-border-t-width, var(--btn-border-width, 2px));
  border-right-width: var(--btn-border-r-width, var(--btn-border-width, 2px));
  border-bottom-width: var(--btn-border-b-width, var(--btn-border-width, 2px));
  border-left-width: var(--btn-border-l-width, var(--btn-border-width, 2px));
  
  border-top-color: var(--btn-border-t-color, var(--btn-border-color, rgb(239, 194, 52)));
  border-right-color: var(--btn-border-r-color, var(--btn-border-color, rgb(239, 194, 52)));
  border-bottom-color: var(--btn-border-b-color, var(--btn-border-color, rgb(239, 194, 52)));
  border-left-color: var(--btn-border-l-color, var(--btn-border-color, rgb(239, 194, 52)));
  
  border-top-left-radius: var(--btn-border-tl-radius, var(--btn-border-radius, 30px));
  border-top-right-radius: var(--btn-border-tr-radius, var(--btn-border-radius, 30px));
  border-bottom-right-radius: var(--btn-border-br-radius, var(--btn-border-radius, 30px));
  border-bottom-left-radius: var(--btn-border-bl-radius, var(--btn-border-radius, 30px));
  
  /* Icon properties */
  --btn-icon-color: rgb(247, 247, 247);
  --btn-icon-fill: rgb(247, 247, 247);
  --btn-icon-wrpr-display: none;
  
  /* Hover state */
  transition: all 0.3s ease;
}

.custom-button:hover {
  background-color: var(--btn-hover-bg, rgb(247, 209, 89));
  color: var(--btn-hover-text-color, var(--btn-text-color, rgb(83, 86, 90)));
  font-weight: var(--btn-hover-text-font-weight, var(--btn-text-font-weight, 400));
  text-decoration: var(--btn-hover-text-decoration, var(--btn-text-decoration, none));
  font-style: var(--btn-hover-text-font-style, var(--btn-text-font-style, normal));
  
  border-color: var(--btn-hover-border-color, var(--btn-border-color, rgb(239, 194, 52)));
  border-top-color: var(--btn-hover-border-t-color, var(--btn-hover-border-color, var(--btn-border-color, rgb(239, 194, 52))));
  border-right-color: var(--btn-hover-border-r-color, var(--btn-hover-border-color, var(--btn-border-color, rgb(239, 194, 52))));
  border-bottom-color: var(--btn-hover-border-b-color, var(--btn-hover-border-color, var(--btn-border-color, rgb(239, 194, 52))));
  border-left-color: var(--btn-hover-border-l-color, var(--btn-hover-border-color, var(--btn-border-color, rgb(239, 194, 52))));
}

/* Common gray button style */
.gray-button {
  --btn-bg-color: transparent;
  --btn-border-color: #adb5bd;
  --btn-text-color: #adb5bd;
  --btn-hover-bg: rgba(173, 181, 189, 0.1);
}

/* Save / Cancel, as modifiers rather than four inline --btn-* variables per
   button (FS-010). new-assessment, modify-assessment and the template editor
   each carried their own copy of exactly these values; the copies are what
   made them drift. */
.green-button {
  --btn-bg-color: #4C8D2B;
  --btn-border-color: #4C8D2B;
  --btn-text-color: #fff;
  --btn-hover-bg: #3c7422;
  --btn-hover-border-color: #3c7422;
  --btn-hover-text-color: #fff;
}

.red-button {
  --btn-bg-color: #dc3545;
  --btn-border-color: #dc3545;
  --btn-text-color: #fff;
  --btn-hover-bg: #c82333;
  --btn-hover-border-color: #c82333;
  --btn-hover-text-color: #fff;
}

/* Destructive, but a step below .danger-button / .red-button.
   Three weights are deliberate, and they say how much is at stake:
     gray-button        — neutral, non-destructive (Cancel)
     red-outline-button — destructive but recoverable in practice
     danger-button      — destructive and irreversible (deleting an assessment
                          takes its responses with it)
   Template delete sits in the middle: since FS-010 a template is only ever a
   starting point, so removing one cannot reach any assessment's data. */
.red-outline-button {
  --btn-bg-color: transparent;
  --btn-border-color: #dc3545;
  --btn-text-color: #dc3545;
  --btn-hover-bg: rgba(220, 53, 69, 0.08);
  --btn-hover-border-color: #c82333;
  --btn-hover-text-color: #c82333;
}

/* Example usage in HTML:
<button class="custom-button">Button Text</button>
<button class="custom-button gray-button">Gray Button</button>
*/