/* 1. Classe base para todos os ícones */
.icone {
  display: inline-block;
  width: 1em;
  height: 1em;
  font-size: inherit; /* Garante que herda o tamanho da fonte do elemento pai ou direto nele */
  background-color: currentColor;

  /* Use contain para redimensionar proporcionalmente sem distorcer */
  -webkit-mask-size: contain;
  mask-size: contain;

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;

  vertical-align: -0.125em; /* Alinha perfeitamente com o texto ao lado */
}

/* 2. Definição do ícone LUA - Versão Solid (Preenchido) */
.i-solid.i-circle-moon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M320 576C178.6 576 64 461.4 64 320C64 178.6 178.6 64 320 64C461.4 64 576 178.6 576 320C576 461.4 461.4 576 320 576zM320 128C214 128 128 214 128 320C130.6 424.5 213.4 512 320 512C369.7 510.7 416.8 493.2 452.9 458.4C458.4 453.1 459.9 445 456.8 438.1C453.7 431.2 446.6 426.9 439 427.5C362.6 430.9 294.1 375.8 290.1 297.1C288.7 242.5 316.9 191.1 366.4 166.4C373.2 163 377.2 155.7 376.2 148.1C375.4 141.5 371 135.9 365 133.5C350.4 128.9 335 128.3 319.8 127.9z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M320 576C178.6 576 64 461.4 64 320C64 178.6 178.6 64 320 64C461.4 64 576 178.6 576 320C576 461.4 461.4 576 320 576zM320 128C214 128 128 214 128 320C130.6 424.5 213.4 512 320 512C369.7 510.7 416.8 493.2 452.9 458.4C458.4 453.1 459.9 445 456.8 438.1C453.7 431.2 446.6 426.9 439 427.5C362.6 430.9 294.1 375.8 290.1 297.1C288.7 242.5 316.9 191.1 366.4 166.4C373.2 163 377.2 155.7 376.2 148.1C375.4 141.5 371 135.9 365 133.5C350.4 128.9 335 128.3 319.8 127.9z'/%3E%3C/svg%3E");
}

/* 3. Definição do ícone LUA - Versão Regular (Contorno / Outlined) */
/* Aqui você colocaria o código SVG da versão vazia/vazada da lua */
.i-regular.i-circle-moon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M320 576C178.6 576 64 461.4 64 320C64 178.6 178.6 64 320 64C461.4 64 576 178.6 576 320C576 461.4 461.4 576 320 576zM320 112C205.1 112 112 205.1 112 320C112 434.9 205.1 528 320 528C434.9 528 528 434.9 528 320C528 205.1 434.9 112 320 112zM320 160C332.5 160 345.7 161 357.7 164.6C362.7 166.6 366.4 171.2 367 176.8C367.7 183.1 364.5 189.2 358.8 192C321 210.9 295 249.9 295 295C295 358.5 346.5 410 410 410C419.2 410 429.5 408.1 434.1 418.4C436.7 424.2 435.4 431 430.8 435.4C402.1 463 363 480 320 480C231.6 480 160 408.4 160 320C160 231.6 231.6 160 320 160z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M320 576C178.6 576 64 461.4 64 320C64 178.6 178.6 64 320 64C461.4 64 576 178.6 576 320C576 461.4 461.4 576 320 576zM320 112C205.1 112 112 205.1 112 320C112 434.9 205.1 528 320 528C434.9 528 528 434.9 528 320C528 205.1 434.9 112 320 112zM320 160C332.5 160 345.7 161 357.7 164.6C362.7 166.6 366.4 171.2 367 176.8C367.7 183.1 364.5 189.2 358.8 192C321 210.9 295 249.9 295 295C295 358.5 346.5 410 410 410C419.2 410 429.5 408.1 434.1 418.4C436.7 424.2 435.4 431 430.8 435.4C402.1 463 363 480 320 480C231.6 480 160 408.4 160 320C160 231.6 231.6 160 320 160z'/%3E%3C/svg%3E");
}