.thegem-te-icon {
  position: relative;
  width: fit-content;
}

.thegem-te-icon .gem-icon-size-tiny {
  font-size: 16px;
}
.thegem-te-icon .gem-icon-size-tiny.gem-simple-icon {
  width: 16px;
  height: 16px;
  line-height: 16px;
}
.thegem-te-icon .gem-icon-size-tiny:not(.gem-simple-icon) .gem-icon-inner {
  width: 25px;
  height: 25px;
  line-height: 25px;
}
.thegem-te-icon .gem-icon {
  display: block;
}
/*.thegem-te-icon .gem-icon.gem-simple-icon {
	width: auto;
	height: auto;
	line-height: initial;
}*/
.thegem-te-icon .gem-icon.gem-simple-icon .gem-icon-inner {
  margin: 0;
}
.thegem-te-icon .gem-icon-inner,
.thegem-te-icon .gem-icon-style-gradient .back-angle,
.thegem-te-icon .gem-icon-shape-hexagon-top-inner-before {
  -webkit-transition: background-color 0.3s linear;
  -moz-transition: background-color 0.3s linear;
  -o-transition: background-color 0.3s linear;
  transition: background-color 0.3s linear;
}
.thegem-te-icon .gem-icon-half-1,
.thegem-te-icon .gem-icon-half-2 {
  -webkit-transition: color 0.3s linear;
  -moz-transition: color 0.3s linear;
  -o-transition: color 0.3s linear;
  transition: color 0.3s linear;
}
.thegem-te-icon .gem-icon {
  -webkit-transition: color 0.3s linear, border-color 0.3s linear;
  -moz-transition: color 0.3s linear, border-color 0.3s linear;
  -o-transition: color 0.3s linear, border-color 0.3s linear;
  transition: color 0.3s linear, border-color 0.3s linear;
  color: var(--thegem-to-menu-level1-color, #3c3950);
}

.thegem-te-icon .gem-icon a:hover {
  cursor: pointer;
}
.thegem-te-icon .gem-icon a:hover .gem-icon-half-1,
.thegem-te-icon .gem-icon a:hover .gem-icon-half-2 {
  color: var(--thegem-to-menu-level1-color-hover, #00bcd4);
}

/*Light icon style*/
#site-header.header-light .thegem-te-icon .gem-icon .gem-icon-half-1,
#site-header.header-light .thegem-te-icon .gem-icon .gem-icon-half-2 {
  color: var(--header-builder-light-color, #ffffff);
}
#site-header.header-light .thegem-te-icon .gem-icon a:hover .gem-icon-half-1,
#site-header.header-light .thegem-te-icon .gem-icon a:hover .gem-icon-half-2 {
  color: var(
    --header-builder-light-color-hover,
    var(--thegem-to-menu-level1-color-hover)
  );
}