/* compiled by scssphp 1.12.1 on Tue, 14 Oct 2025 19:03:12 +0000 (0.0998s) */

.svg-masked.more::after, .svg-masked.more::before {
  -webkit-mask-image: url("../../icons/menu-top/more.svg");
  mask-image: url("../../icons/menu-top/more.svg");
}
.svg-masked.delete::after, .svg-masked.delete::before {
  -webkit-mask-image: url("../../icons/menu-top/delete.svg");
  mask-image: url("../../icons/menu-top/delete.svg");
}
.svg-masked.prompts::after, .svg-masked.prompts::before {
  -webkit-mask-image: url("../../icons/menu-top/prompts.svg");
  mask-image: url("../../icons/menu-top/prompts.svg");
}
.svg-masked {
  --mask-size: 16px;
  --icon-color: #333;
}
.svg-masked.blue {
  --icon-color: var(--action-button-color);
}
.svg-masked::after {
  content: "";
  background: var(--icon-color);
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  width: var(--mask-size);
  height: var(--mask-size);
  display: block;
  margin-top: 2.5px;
  margin-left: 2.5px;
  -webkit-mask-size: var(--mask-size);
  mask-size: var(--mask-size);
}
.delete.x-menu-item:hover {
  background-color: var(--action-delete-background-color);
}
.delete .x-menu-item-text {
  color: var(--action-delete-color);
}
.delete .svg-masked {
  --icon-color: var(--action-delete-color);
}
.delete.x-menu-item.x-menu-item-over {
  background-color: var(--action-delete-background-color) !important;
}
.delete.x-menu-item.x-menu-item-focus {
  background-color: var(--action-delete-background-color) !important;
}
@keyframes colorChange {
  0% {
    background-color: #FF5733;
    color: #FFFFFF;
  }
  /* Arancione */
  25% {
    background-color: #33FF57;
    color: #000000;
  }
  /* Verde */
  50% {
    background-color: #3357FF;
    color: #FFFFFF;
  }
  /* Blu */
  75% {
    background-color: #FF33A1;
    color: #000000;
  }
  /* Rosa */
  100% {
    background-color: #FF5733;
    color: #FFFFFF;
  }
  /* Torna all'inizio */
}
@keyframes gradientAnimation {
  0% {
    background: linear-gradient(45deg, #FF5733, #FF33A1);
    color: #FFFFFF;
  }
  25% {
    background: linear-gradient(45deg, #33FF57, #FFDD33);
    color: #000000;
  }
  50% {
    background: linear-gradient(45deg, #3357FF, #33FFF5);
    color: #FFFFFF;
  }
  75% {
    background: linear-gradient(45deg, #FF33A1, #FF5733);
    color: #000000;
  }
  100% {
    background: linear-gradient(45deg, #FF5733, #FF33A1);
    color: #FFFFFF;
  }
}
@keyframes moveGradient {
  0% {
    background-position: 0% 0%;
  }
  25% {
    background-position: 100% 50%;
  }
  50% {
    background-position: 50% 100%;
  }
  75% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 0%;
  }
}
.ai-button {
  overflow: hidden;
}
.ai-button.x-menu-item.x-menu-item-over {
  background-color: transparent !important;
}
.ai-button.x-menu-item.x-menu-item-focus {
  background-color: transparent !important;
}
.ai-button .x-edit-ai {
  width: 16px;
  height: 16px;
}
.ai-button .x-edit-ai.svg-masked {
  width: 16px;
  height: 16px;
}
.ai-button .x-edit-ai.svg-masked::after {
  content: "";
  width: 16px;
  height: 16px;
  display: block;
  background: var(--action-button-color);
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 16px;
  mask-size: 16px;
}
.ai-button:hover {
  background: linear-gradient(45deg, #007BFF, #00C9FF, #b133ff, #FF33A1);
  background-size: 300% 300%;
  animation: moveGradient 2s infinite linear;
}
.ai-button:hover .x-edit-ai.svg-masked::after {
  background: linear-gradient(45deg, #32bbf8, #dbff49, #53fbff, #d776ff, #32bbf8, #dbff49, #53fbff, #d776ff);
  background-size: 300% 300%;
  animation: moveGradient 2s infinite linear;
}
.ai-button:hover .svg-masked::after {
  background: linear-gradient(45deg, #32bbf8, #dbff49, #53fbff, #d776ff, #32bbf8, #dbff49, #53fbff, #d776ff);
  background-size: 300% 300%;
  animation: moveGradient 2s infinite linear;
}
.ai-button:hover .x-menu-item-text {
  color: #ffffff;
}
.toolbar-top .x-btn.ai-button.x-btn-over.x-btn-default-toolbar-small:hover {
  background: linear-gradient(45deg, #007BFF, #00C9FF, #b133ff, #FF33A1);
  background-size: 300% 300%;
  animation: moveGradient 2s infinite linear;
}
.toolbar-top .x-btn.ai-button.x-btn-over.x-btn-default-toolbar-small:hover .x-btn-inner {
  color: #ffffff;
}
.toolbar-top .x-btn.ai-button.x-btn-over.x-btn-default-toolbar-small .svg-masked::after {
  background: linear-gradient(45deg, #32bbf8, #dbff49, #53fbff, #d776ff, #32bbf8, #dbff49, #53fbff, #d776ff);
  background-size: 300% 300%;
  animation: moveGradient 2s infinite linear;
}