/* ==========================================================
   COMPONENTE
   Lactalis Form

   Clase principal:
   .lactalis-form

   Variables disponibles:

   --lf-primary
   --lf-primary-hover
   --lf-bg-soft
   --lf-border
   --lf-text
   --lf-muted
   --lf-radius

   Autor: Soluciona
   Versión: 1.0
========================================================== */


/* ==========================================================
   INPUTS BASE
========================================================== */

.lactalis-form input,
.lactalis-form select,
.lactalis-form textarea {
  border: 1px solid var(--lf-border) !important;
  border-radius: var(--lf-radius) !important;
  color: var(--lf-text) !important;
}

.lactalis-form input:focus,
.lactalis-form select:focus,
.lactalis-form textarea:focus {
  border-color: var(--lf-primary) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--lf-primary) 18%, transparent) !important;
}


/* ==========================================================
   SUBMIT
========================================================== */

.lactalis-form button[type="submit"] {
  background: var(--lf-primary) !important;
  border-radius: var(--lf-radius) !important;
  transition: all .2s ease;
}

.lactalis-form button[type="submit"]:hover {
  background: var(--lf-primary-hover) !important;
}


/* ==========================================================
   UPLOAD NATIVO MEJORADO
========================================================== */

.lactalis-form input[type="file"] {
  width: 100%;
  padding: 18px;
  border: 1.5px dashed var(--lf-primary) !important;
  background: var(--lf-bg-soft);
  cursor: pointer;
}

.lactalis-form input[type="file"]::file-selector-button {
  background: var(--lf-primary);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 10px 18px;
  margin-right: 14px;
  cursor: pointer;
  font-weight: 600;
}

.lactalis-form input[type="file"]::file-selector-button:hover {
  background: var(--lf-primary-hover);
}


/* ==========================================================
   ESTADO DE ENVÍO
========================================================== */

.lactalis-form button.is-loading {
  cursor: wait;
  opacity: .9;
}

.lactalis-form button.is-loading::after {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-left: 10px;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: lf-spin .8s linear infinite;
  vertical-align: middle;
}

@keyframes lf-spin {
  to {
    transform: rotate(360deg);
  }
}