/*
 * Buttons (docs/design/components/buttons.md). Square, no border, no shadow; hover = focus;
 * Elementor's `transition: all .3s`. Variants:
 *   --primary   kit default: yellow, 14px, padding 20px 40px (footer CTA, "Solicitar una visita", search)
 *   --green-sm  header "Agregar propiedad": green, 12px, padding 11px 30px
 *   --yellow-sm sidebar "Filtrar resultados": yellow, 12px, padding 11px 30px
 *   --green     JetFormBuilder green submit (popup "Enviar solicitud"), 14px, padding 20px 40px
 *   --link      "Ver más propiedades": transparent, arrow icon after the text
 */
.button {
  display: inline-block;
  padding: 20px 40px;
  border: 0;
  border-radius: 0;
  background-color: var(--color-accent);
  box-shadow: none;
  color: var(--color-secondary);
  fill: var(--color-secondary);
  font-family: var(--font-sans);
  font-size: var(--fs-button);
  font-weight: 700;
  line-height: var(--lh-button);
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s;
}
.button:hover,
.button:focus {
  background-color: var(--color-primary);
  color: var(--color-white);
  fill: var(--color-white);
}
.button:disabled {
  opacity: 50%;
  cursor: default;
}

.button--green-sm {
  padding: 11px 30px;
  background-color: var(--color-primary);
  color: var(--color-white);
  fill: var(--color-white);
  font-size: var(--fs-button-sm);
  line-height: var(--lh-button-sm);
}
.button--green-sm:hover,
.button--green-sm:focus {
  background-color: var(--color-accent);
  color: var(--color-secondary);
  fill: var(--color-secondary);
}

.button--yellow-sm {
  padding: 11px 30px;
  font-size: var(--fs-button-sm);
  line-height: var(--lh-button-sm);
}

.button--green {
  background-color: var(--color-primary);
  color: var(--color-white);
  fill: var(--color-white);
}
.button--green:hover {
  background-color: var(--color-accent);
  color: var(--gray-700);
  fill: var(--gray-700);
}
/* JFB: focus only adds the browser outline. */
.button--green:focus:not(:hover) {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.button--link {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 0;
  background-color: transparent;
  color: var(--color-secondary);
}
.button--link:hover,
.button--link:focus {
  background-color: transparent;
  color: var(--color-primary);
}

.button__icon {
  display: inline-flex;
}
.button__icon svg {
  display: block;
  width: 14px;
  height: 14px;
}