/* 
 * Modern Button - Octor
 * Componentized & Decoupled
 * Path: assets/css/components/modern-btn.css
 */

:root {
  --mb-radius: 50px;
  --mb-font-size: 16px;
  --mb-font-weight: 600;
  --mb-letter-spacing: 0.5px;
  --mb-padding: 14px 38px;
  --mb-transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --mb-glass-blur: 12px;
}

.modern-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px; /* Altura fixa para garantir alinhamento perfeito */
  padding: 0 38px; /* Padding apenas lateral */
  border-radius: var(--mb-radius);
  font-size: var(--mb-font-size);
  font-weight: var(--mb-font-weight);
  letter-spacing: var(--mb-letter-spacing);
  transition: var(--mb-transition);
  overflow: hidden;
  border: 1px solid transparent; /* Base para evitar pulos de tamanho */
  backdrop-filter: blur(var(--mb-glass-blur));
  -webkit-backdrop-filter: blur(var(--mb-glass-blur));
  z-index: 1;
  text-decoration: none;
  cursor: pointer;
  color: #fff;
  background: none;
  box-sizing: border-box;
  line-height: normal; /* Voltando para normal para evitar problemas de corte */
  vertical-align: middle;
  margin: 0;
}

/* Adaptive Theme Colors */
[data-theme="light"] .modern-btn.ghost {
  color: #016335; /* Verde Octor mais escuro para leitura */
  border-color: rgba(12, 224, 122, 0.4); /* Borda verde suave */
  --mb-fill-bg: #0CE07A; /* Preenche com verde no light mode para dar contraste */
}

[data-theme="light"] .modern-btn.ghost:hover {
  color: #fff; /* Texto branco sobre fundo verde sólido */
  border-color: #0CE07A;
}

/* Pseudo-element for filling animation (Horizontal Sweep) */
.modern-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0; /* Começa zerado na largura */
  height: 100%;
  background: var(--mb-fill-bg, var(--primary-color));
  transition: width 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  z-index: -1;
  border-radius: inherit;
}

.modern-btn:hover::before {
  width: 100%; /* Expande horizontalmente */
}

.modern-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transform: skewX(-20deg);
  transition: 0.8s;
  z-index: 1;
}

.modern-btn:hover::after {
  left: 150%;
}

.modern-btn.primary {
  background: #0CE07A;
  border-color: #0CE07A;
  --mb-fill-bg: #0CE07A;
}

.modern-btn.ghost {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.15);
  --mb-fill-bg: rgba(255, 255, 255, 0.15);
}

.modern-btn:hover {
  background-color: #04bc66;
  color: #fff;
}

/* Icon adjustment */
.modern-btn i {
  margin-left: 10px;
  font-size: 0.9em;
  transition: transform 0.3s ease;
}

.modern-btn i:first-child {
  margin-left: 0;
  margin-right: 12px; /* Espaço quando o ícone vem antes do texto */
}

.modern-btn:hover i {
  transform: translateX(4px);
}

/* Mobile adjustments */
@media screen and (max-width: 575px) {
  .modern-btn {
    padding: 12px 28px;
    font-size: 15px;
  }
}