.button {
  min-height: 42px;

  border-radius: var(--radius-small);

  font-weight: 650;

  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    transform 0.15s ease,
    box-shadow 0.18s ease;
}


.button:hover {
  transform: translateY(-1px);
}


.button:active {
  transform: translateY(0);
}


.button.is-link {
  background-color: var(--orange);
  border-color: var(--orange);

  color: var(--navy);

  font-weight: 750;
}


.button.is-link:hover {
  background-color: var(--orange-dark);
  border-color: var(--orange-dark);

  color: #ffffff;

  box-shadow:
    0 4px 12px rgba(217, 119, 6, 0.22);
}


.button.is-info {
  background-color: var(--blue);
  border-color: var(--blue);

  color: #ffffff;

  font-weight: 700;
}


.button.is-info:hover {
  background-color: var(--blue-dark);
  border-color: var(--blue-dark);

  color: #ffffff;

  box-shadow:
    0 4px 12px rgba(37, 99, 235, 0.2);
}


.button.is-warning {
  background-color: var(--orange);
  border-color: var(--orange);

  color: var(--navy);

  font-weight: 700;
}


.button.is-warning:hover {
  background-color: var(--orange-dark);
  border-color: var(--orange-dark);

  color: #ffffff;
}


.button.is-success {
  background-color: var(--green);
  border-color: var(--green);

  color: #ffffff;

  font-weight: 700;
}


.button.is-success:hover {
  background-color: var(--green-dark);
  border-color: var(--green-dark);

  color: #ffffff;
}


.button.is-danger {
  background-color: var(--red);
  border-color: var(--red);

  color: #ffffff;

  font-weight: 700;
}


.button.is-danger:hover {
  background-color: var(--red-dark);
  border-color: var(--red-dark);

  color: #ffffff;
}


.button.is-danger.is-light {
  background-color: var(--red-light);

  border-color: #fecaca;

  color: var(--red-dark);
}


.button.is-danger.is-light:hover {
  background-color: #fecaca;

  border-color: #fca5a5;

  color: #991b1b;
}


.button.is-light {
  background-color: #ffffff;

  border:
    1px solid
    var(--border-dark);

  color: var(--text);
}


.button.is-light:hover {
  background-color: var(--surface-soft);

  border-color: #94a3b8;

  color: var(--navy);
}


/* =========================================
   FAVOURITE / SAVE BUTTON
========================================= */

.button.favourite-button {
  min-height: 38px;

  color:
    var(--orange-dark);

  background-color:
    #fffaf3;

  border:
    1px solid
    #fdba74;

  border-radius:
    8px;

  font-size:
    0.78rem;

  font-weight:
    900;
}


.button.favourite-button:hover {
  color:
    var(--orange-dark);

  background-color:
    #fff3e0;

  border-color:
    var(--orange);
}


/* =========================================
   SAVED STATE
========================================= */

.button.favourite-button.is-favourited {
  color:
    #ffffff;

  background-color:
    var(--orange);

  border-color:
    var(--orange);

  font-weight:
    900;
}


.button.favourite-button.is-favourited:hover {
  color:
    #ffffff;

  background-color:
    var(--orange-dark);

  border-color:
    var(--orange-dark);
}


.button[disabled],
.button.is-disabled {
  transform: none;

  cursor: not-allowed;

  opacity: 0.55;
}


@media screen and (max-width: 768px) {

  .button {
    min-height: 44px;
  }


  .button.favourite-button {
    min-height: 40px;

    font-weight:
      900;
  }

}