@import url('variables.css');

:root {
  /* Button-specific variables */
  --color-button-background: #2c7e9e; /* Solid fallback color */
  --color-button-gradient-start: #2c7e9e;
  --color-button-gradient-mid: #3dadd9;
  --color-button-gradient-mid2: #38a0ca;
  --color-button-gradient-end: #41b9e8;
  --color-button-hover: #41B6E6;
}

.button_container {
  background-color: var(--color-light, #fff);
  border: 1px solid var(--color-border, #b3b3b3);
  border-radius: var(--radius-small, 6px);
  overflow: hidden;
  margin-bottom: var(--spacing-medium, 12px);
  padding: var(--spacing-large, 16px) 4px;
}

div.button {
  clear: both;
}

span.button {
  display: block;
  float: left;
  width: auto;
  margin-right: 2px;
  padding: 0.5em;
}

img.button {
  display: none;
}

a.button:link, a.button:visited {
  font-weight: bold;
  color: var(--color-light, #ffffff);
  text-decoration: none;
  border-top: 2px solid var(--color-light, #ffffff);
  border-right: 2px solid var(--color-secondary, #00488C);
  border-bottom: 2px solid var(--color-secondary, #00488C);
  border-left: 2px solid var(--color-light, #ffffff);
  border-radius: var(--radius-small, 6px);
  padding: 12px;
  background-color: var(--color-button-background, #2c7e9e);
  /* Modern Gradient */
  background: linear-gradient(
      to bottom,
      var(--color-button-gradient-start, #2c7e9e) 0%,
      var(--color-button-gradient-mid, #3dadd9) 50%,
      var(--color-button-gradient-mid2, #38a0ca) 51%,
      var(--color-button-gradient-end, #41b9e8) 100%
  );

  /* Safari Compatibility */
  background: -webkit-linear-gradient(
      to bottom,
      #2c7e9e 0%,
      #3dadd9 50%,
      #38a0ca 51%,
      #41b9e8 100%
  );
}

a.button:hover {
  font-weight: bold;
  color: var(--color-light, #ffffff);
  background-color: var(--color-light, white);
  text-decoration: none;
  position: relative;
  top: 1px;
  left: 1px;
  background-color: var(--color-button-hover, #41B6E6);
}

/* Action Buttons (Edit & Remove) */
div.button_action {
  background-color: #D9E8FF;
  text-align: center;
  float: right;
  border-left: 1px solid var(--color-secondary, #00488C);
  border-top: 1px solid var(--color-secondary, #00488C);
  margin-left: 2px; /* Keeping original value */
}