/*
 * General styling of buttons.
 */
.btn {
  --bs-btn-border-radius: 50rem;
  --bs-btn-font-size: 1.0625rem;
  /* 17px */
  padding-inline: 2.41rem;
  /* Om ongeveer overeen tekomen met breedtes in Figma */
  padding-block: 1rem;
  /* Om tot een hoogte van 62px te komen */
  min-height: 3.875rem;
  /* 62px */
  transition: color var(--transition), background-color var(--transition), border-color var(--transition), box-shadow var(--transition), filter var(--transition);
}

.btn-primary {
  --bs-btn-color: #000;
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: var(--bs-primary);
  --bs-btn-active-border-color: var(--bs-primary);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);

  /* Brighten button on hover */
  &:hover,
  &:active {
    filter: brightness(1.1);
  }
}

.btn-secondary {
  --bs-btn-color: #000;
  --bs-btn-hover-color: #000;
  --bs-btn-active-color: #000;
  --bs-btn-disabled-color: #000;
  --bs-btn-bg: var(--bs-secondary);
  --bs-btn-border-color: var(--bs-secondary);
  --bs-btn-hover-bg: var(--bs-secondary);
  --bs-btn-hover-border-color: var(--bs-secondary);
  --bs-btn-active-bg: var(--bs-secondary);
  --bs-btn-active-border-color: var(--bs-secondary);
  --bs-btn-disabled-bg: var(--bs-secondary);
  --bs-btn-disabled-border-color: var(--bs-secondary);

  &:hover,
  &:active {
    filter: brightness(1.1);
  }
}

.node-edit-button {
  position: absolute;
  top: 98px;
  right: 1em;
  z-index: 2;
}

.btn.btn-link {
  text-align: left;
  --bs-btn-padding-x: 0;
  padding-inline: 0;
  color: var(--bs-body-color);
}

button.info {
  background-color: var('--bs-info-bg-subtle');
  color: black;
  border-radius: 50%;
  border: 1px solid black;
  width: 19px;
  height: 19px;
  line-height: 19px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 15px;
  display: inline-block;
  transform: translateY(-10px);
}

.button.delete-order-item {

  background: url(../../images/delete.svg) center no-repeat;
  text-indent: -9999px;
  padding: 0;
  width: 30px;
  height: 30px;
  border: none;
}

.cart.cart-form input[data-drupal-selector="edit-checkout"],
.commerce-checkout-flow-custom-checkout-flow input[data-drupal-selector="edit-actions-next"] {
  --bs-btn-color: #000;
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-border-radius: 50rem;

  --bs-btn-padding-x: 0.75rem;
  --bs-btn-padding-y: 0.375rem;
  --bs-btn-border-width: var(--bs-border-width);


  min-height: 3.875rem;
  transition: color var(--transition), background-color var(--transition), border-color var(--transition), box-shadow var(--transition), filter var(--transition);
  display: inline-block;
  padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
  color: var(--bs-btn-color);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
  border-radius: var(--bs-btn-border-radius);
  background-color: var(--bs-primary);
  padding-inline: 2.41rem;
  padding-block: 1rem;

  &:hover {
    filter: brightness(1.1);
  }
}