/*----------------------------------
    CSS TOC (Table of Contents)
  ------------------------------------
  :: GLOBAL
  :: CUSTOM ICONS
  ----------------------------------*/

/*----------------------------------
    :: GLOBAL
  ----------------------------------*/

:root {
  --csmf-logo-image: url("../images/icon-dark.png");
}

/*----------------------------------
    :: CUSTOM ICONS
  ----------------------------------*/
.elementor-panel .elementor-element .icon .csmf::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  width: 18px;
  height: 18px;
  background-image: var(--csmf-logo-image);
  background-position: center center;
  background-size: cover;
  filter: grayscale(1);
  transition: all 300ms ease;
  opacity: 0.3;
}

.elementor-panel .elementor-element:hover .icon .csmf::after {
  filter: grayscale(0);
  opacity: 1;
  transform: scale(1.1);
}

.csmf-logo::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 16px;
  height: 16px;
  background-image: var(--csmf-logo-image);
  background-position: center center;
  background-size: cover;
}

.elementor-panel :is(.elementor-panel-menu-item)[class*="elementor-panel-menu-item-settings-csmf-"] {
  position: relative;
}
.elementor-panel :is(.elementor-panel-menu-item)[class*="elementor-panel-menu-item-settings-csmf-"]:after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 16px;
  height: 16px;
  background-image: var(--csmf-logo-image);
  background-position: center center;
  background-size: cover;
  position: absolute;
  top: 50%;
  inset-inline-end: 1em;
  transform: translateY(-50%);
}

.csmf-icon {
  position: absolute;
  right: 15px;
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  background-image: var(--csmf-logo-image);
  background-position: center center;
  background-size: cover;
}