:host {
  width: fit-content;

  --btn-font-size: inherit;
  --btn-font-weight: 400;
  --btn-padding: 0.375rem 0.75rem;
  --btn-border-radius: 0.25rem;
}

/* Estilos básicos para los botones */
.btn {
  display: inline-block;
  box-sizing: border-box;
  font-size: var(--ibtn-font-size, var(--btn-font-size));
  font-weight: var(--ibtn-weight, var(--btn-font-weight));
  padding: var(--ibtn-padding, var(--btn-padding));
  border-radius: var(--ibtn-border-radius, var(--btn-border-radius));
  border: 1px solid transparent;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  transition:
    color 0.15s ease-in-out,
    background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;

  color: var(--btn-color, var(--ibtn-color));
  background-color: var(--btn-background-color, var(--ibtn-background-color));
  border-color: var(--btn-border-color, var(--ibtn-border-color));

  &:hover {
    color: var(--btn-hover-color, var(--ibtn-hover-color));
    background-color: var(
      --btn-hover-background-color,
      var(--ibtn-hover-background-color)
    );
    border-color: var(--btn-hover-border-color, var(--ibtn-hover-border-color));
  }
}

/* Botón de tipo outline */
.btn-outline {
  color: var(--btn-outline-color, var(--ibtn-outline-color));
  background-color: transparent;
  border: 1px solid
    var(--btn-outline-border-color, var(--ibtn-outline-border-color));

  &:hover {
    color: var(--btn-outline-hover-color, var(--ibtn-outline-hover-color));
    background-color: var(
      --btn-outline-hover-background-color,
      var(--ibtn-outline-hover-background-color)
    );
    border-color: var(
      --btn-outline-hover-border-color,
      var(--ibtn-outline-hover-border-color)
    );
  }
}

/* Botón deshabilitado */
.btn-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* Botón de tamaño grande */
.btn-lg {
  --ibtn-padding: 0.5rem 1rem;
  --ibtn-font-size: 1.25em;
  --ibtn-border-radius: 0.3rem;
  line-height: 1.5;
}

/* Botón de tamaño pequeño */
.btn-sm {
  --ibtn-padding: 0.25rem 0.5rem;
  --ibtn-font-size: 0.875em;
  --ibtn-border-radius: 0.2rem;
  line-height: 1.5;
}

/* Botón tipo texto */
.btn-text {
  --ibtn-color: #007bff;
  --ibtn-hover-color: #0056b3;
  background-color: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }
}

/* enlace tipo botón */
a.btn {
  text-decoration: none;

  &:hover {
    text-decoration: none;
  }
}

/* Tipos de colores */

.btn-primary {
  --ibtn-base-color: var(--btn-base-color, #007bff);
  --ibtn-color: #fff;
  --ibtn-background-color: var(--ibtn-base-color);
  --ibtn-border-color: var(--ibtn-base-color);
  --ibtn-hover-color: #fff;
  --ibtn-hover-background-color: #0056b3;
  --ibtn-hover-border-color: #004085;
  --ibtn-outline-color: var(--ibtn-base-color);
  --ibtn-outline-border-color: var(--ibtn-outline-color);
  --ibtn-outline-hover-color: var(--ibtn-color);
  --ibtn-outline-hover-background-color: var(--ibtn-base-color);
  --ibtn-outline-hover-border-color: var(--ibtn-outline-hover-background-color);
}

.btn-secondary {
  --ibtn-base-color: var(--btn-base-color, #6c757d);
  --ibtn-color: #fff;
  --ibtn-background-color: var(--ibtn-base-color);
  --ibtn-border-color: var(--ibtn-base-color);
  --ibtn-hover-color: #fff;
  --ibtn-hover-background-color: #545b62;
  --ibtn-hover-border-color: #545b62;
  --ibtn-outline-color: var(--ibtn-base-color);
  --ibtn-outline-border-color: var(--ibtn-outline-color);
  --ibtn-outline-hover-color: var(--ibtn-color);
  --ibtn-outline-hover-background-color: var(--ibtn-base-color);
  --ibtn-outline-hover-border-color: var(--ibtn-outline-hover-background-color);
}

.btn-success {
  --ibtn-base-color: var(--btn-base-color, #28a745);
  --ibtn-color: #fff;
  --ibtn-background-color: var(--ibtn-base-color);
  --ibtn-border-color: var(--ibtn-base-color);
  --ibtn-hover-color: #fff;
  --ibtn-hover-background-color: #218838;
  --ibtn-hover-border-color: #1e7e34;
  --ibtn-outline-color: var(--ibtn-base-color);
  --ibtn-outline-border-color: var(--ibtn-outline-color);
  --ibtn-outline-hover-color: var(--ibtn-color);
  --ibtn-outline-hover-background-color: var(--ibtn-base-color);
  --ibtn-outline-hover-border-color: var(--ibtn-outline-hover-background-color);
}

.btn-danger {
  --ibtn-base-color: var(--btn-base-color, #dc3545);
  --ibtn-color: #fff;
  --ibtn-background-color: var(--ibtn-base-color);
  --ibtn-border-color: var(--ibtn-base-color);
  --ibtn-hover-color: #fff;
  --ibtn-hover-background-color: #c82333;
  --ibtn-hover-border-color: #bd2130;
  --ibtn-outline-color: var(--ibtn-base-color);
  --ibtn-outline-border-color: var(--ibtn-outline-color);
  --ibtn-outline-hover-color: var(--ibtn-color);
  --ibtn-outline-hover-background-color: var(--ibtn-base-color);
  --ibtn-outline-hover-border-color: var(--ibtn-outline-hover-background-color);
}

.btn-warning {
  --ibtn-base-color: var(--btn-base-color, #ffc107);
  --ibtn-color: #212529;
  --ibtn-background-color: var(--ibtn-base-color);
  --ibtn-border-color: var(--ibtn-base-color);
  --ibtn-hover-color: #212529;
  --ibtn-hover-background-color: #e0a800;
  --ibtn-hover-border-color: #d39e00;
  --ibtn-outline-color: var(--ibtn-base-color);
  --ibtn-outline-border-color: var(--ibtn-outline-color);
  --ibtn-outline-hover-color: var(--ibtn-color);
  --ibtn-outline-hover-background-color: var(--ibtn-base-color);
  --ibtn-outline-hover-border-color: var(--ibtn-outline-hover-background-color);
}

.btn-info {
  --ibtn-base-color: var(--btn-base-color, #17a2b8);
  --ibtn-color: #fff;
  --ibtn-background-color: var(--ibtn-base-color);
  --ibtn-border-color: var(--ibtn-base-color);
  --ibtn-hover-color: #fff;
  --ibtn-hover-background-color: #138496;
  --ibtn-hover-border-color: #117a8b;
  --ibtn-outline-color: var(--ibtn-base-color);
  --ibtn-outline-border-color: var(--ibtn-outline-color);
  --ibtn-outline-hover-color: var(--ibtn-color);
  --ibtn-outline-hover-background-color: var(--ibtn-base-color);
  --ibtn-outline-hover-border-color: var(--ibtn-outline-hover-background-color);
}

.btn-light {
  --ibtn-base-color: var(--btn-base-color, #f8f9fa);
  --ibtn-color: #212529;
  --ibtn-background-color: var(--ibtn-base-color);
  --ibtn-border-color: var(--ibtn-base-color);
  --ibtn-hover-color: #212529;
  --ibtn-hover-background-color: #e2e6ea;
  --ibtn-hover-border-color: #dae0e5;
  --ibtn-outline-color: var(--ibtn-base-color);
  --ibtn-outline-border-color: var(--ibtn-outline-color);
  --ibtn-outline-hover-color: var(--ibtn-color);
  --ibtn-outline-hover-background-color: var(--ibtn-base-color);
  --ibtn-outline-hover-border-color: var(--ibtn-outline-hover-background-color);
}

.btn-dark {
  --ibtn-base-color: var(--btn-base-color, #343a40);
  --ibtn-color: #fff;
  --ibtn-background-color: var(--ibtn-base-color);
  --ibtn-border-color: var(--ibtn-base-color);
  --ibtn-hover-color: #fff;
  --ibtn-hover-background-color: #424649;
  --ibtn-hover-border-color: #373b3e;
  --ibtn-outline-color: var(--ibtn-base-color);
  --ibtn-outline-border-color: var(--ibtn-outline-color);
  --ibtn-outline-hover-color: var(--ibtn-color);
  --ibtn-outline-hover-background-color: var(--ibtn-base-color);
  --ibtn-outline-hover-border-color: var(--ibtn-outline-hover-background-color);
}