:root {
  /* === BUTTON ========================================================== */
  --button-font-family: "Lexend", sans-serif;
  --button-font-size: 14px;
  --button-font-weight: 400;

  --button-text-color: var(--zinc-200);
  --button-background-color: var(--blue-600);
  --button-border: 1px solid var(--blue-500);
  --button-border-radius: 5px;
  --button-box-shadow: var(--box-shadow-M);

  --button-hover-text-color: white;
  --button-hover-background-color: var(--blue-700);
  --button-hover-border: 1px solid var(--blue-600);
  --button-hover-box-shadow: var(--box-shadow-S);

  --button-disabled-text-color: var(--zinc-700);
  --button-disabled-background-color: var(--zinc-200);

  /* === BUTTON 2 ======================================================== */
  --button2-font-family: var(--font-family);
  --button2-font-size: 14px;
  --button2-font-weight: 400;

  --button2-text-color: var(--zinc-200);
  --button2-background-color: var(--darker-30);
  --button2-border: none;
  --button2-border-radius: 0;
  --button2-box-shadow: none;

  --button2-hover-text-color: var(--zinc-100);
  --button2-hover-background-color: var(--darker-50);
  --button2-hover-border: none;
  --button2-hover-box-shadow: none;

  --button2-disabled-text-color: var(--zinc-600);
  --button2-disabled-background-color: var(--darker-20);

  /* === BUTTON ========================================================== */
  --button3-font-family: "Lexend", sans-serif;
  --button3-font-size: 14px;
  --button3-font-weight: 400;

  --button3-text-color: var(--zinc-700);
  --button3-background-color: linear-gradient(
    to right,
    var(--yellow-700) 20px,
    var(--yellow-300) 0px
  );
  --button3-border: 1px solid var(--yellow-700);
  --button3-border-radius: 5px;
  --button3-box-shadow: var(--box-shadow-S);

  --button3-hover-text-color: black;
  --button3-hover-background-color: linear-gradient(
    to right,
    var(--yellow-700) 20px,
    var(--yellow-500) 0px
  );
  --button3-hover-border: 1px solid rgba(0, 0, 0, 0.5);
  --button3-hover-box-shadow: var(--box-shadow-S);

  --button3-disabled-text-color: var(--zinc-700);
  --button3-disabled-background-color: var(--zinc-200);
}

.buttons {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;

  width: 100%;
  padding: var(--gap) 0 0 0;
  margin: 0 auto;
}

form .buttons {
  justify-content: center;
}

/* === BUTTON COMMON ======================================================= */
button,
.button,
.button2,
.button3 {
  user-select: none;
  cursor: pointer;

  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;

  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  text-overflow: ellipsis;

  width: auto;
  min-width: 100px;
  padding: 10px 15px;
  margin: 0;

  transition: all 0.25s ease-in-out;
}

/* === BUTTON ============================================================== */
button,
.button {
  font-family: var(--button-font-family);
  font-size: var(--button-font-size);
  font-weight: var(--button-font-weight);

  color: var(--button-text-color);
  background-color: var(--button-background-color);
  border: var(--button-border);
  border-radius: var(--button-border-radius);
  box-shadow: var(--button-box-shadow);
}

button:hover,
.button:hover {
  color: var(--button-hover-text-color);
  background-color: var(--button-hover-background-color);
  border: var(--button-hover-border);
  box-shadow: var(--button-hover-box-shadow);
}

/* === BUTTON 2 ============================================================ */
.button2 {
  font-family: var(--button2-font-family);
  font-size: var(--button2-font-size);
  font-weight: var(--button2-font-weight);

  color: var(--button2-text-color);
  background-color: var(--button2-background-color);
  border: var(--button2-border);
  border-radius: var(--button2-border-radius);
  box-shadow: var(--button2-box-shadow);

  text-transform: none;
}

.button2::before {
  content: "▷ ";
}

.button2:hover {
  color: var(--button2-hover-text-color);
  background-color: var(--button2-hover-background-color);
  border: var(--button2-hover-border);
  box-shadow: var(--button2-hover-box-shadow);
}

/* === BUTTON 3 ============================================================ */
.button3 {
  font-family: var(--button2-font-family);
  font-size: var(--button2-font-size);
  font-weight: var(--button2-font-weight);

  color: var(--button3-text-color);
  background: var(--button3-background-color);
  background-size: 100% 100%;
  border: var(--button3-border);
  border-radius: var(--button3-border-radius);
  box-shadow: var(--button3-box-shadow);

  text-transform: none;

  padding-left: 30px;
}

.button3:hover {
  color: var(--button3-hover-text-color);
  background: var(--button3-hover-background-color);
  box-shadow: var(--button3-hover-box-shadow);
}