/** Button Components for Dover Pottery Studio */

/* Base Button Styles */
.button {
  display: inline-block;
  padding: 10px 20px;
  font-size: 16px;
  color: var(--color1);
  background-color: var(--color3);
  text-align: center;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s;
  align-items: center;
}

.button:hover {
  background-color: var(--color2);
  color: var(--color4);
}

/* Dark Mode Buttons */
@media (prefers-color-scheme: dark) {
  .button {
      background-color: var(--color4);
      color: var(--color2);
  }

  .button:hover {
      background-color: var(--color3);
      color: var(--color1);
  }
}

/* Button Tables */
.button-table {
  border-top: 0px solid #cccccc;
  background-color: var(--color3);
  margin: 10px;
  padding: 100px;
}

/* Kilnfire Button Links */
.kilnfire-button-container {
  text-align: center;
  margin: 20px 0;
}

.kilnfire-button {
  display: inline-block;
  padding: 10px 20px;
  font-size: 16px;
  color: var(--color1);
  background-color: var(--color3);
  text-align: center;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s;
  align-items: center;
}

.kilnfire-button:hover {
  background-color: var(--color2);
  color: var(--color4);
}

@media (prefers-color-scheme: dark) {
  .kilnfire-button {
      background-color: var(--color4);
      color: var(--color2);
  }

  .kilnfire-button:hover {
      background-color: var(--color3);
      color: var(--color1);
  }
}