/* Icon Styles */

/* Move these imports to the top of the CSS fonts and icons pages after they are created */
@import url("https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp|Material+Symbols+Outlined&display=block");/*:opsz,wght,FILL,GRAD@24,100,0,0*/

/* Note: Put your CSS Variables in ":root{}" below so they are scoped. Note that some of these css variables are passed here from the global css variable sheet. */
:root {
  --theme1-local-icon-color: var(--theme1-global-icon-rgbcolor-1);
  --theme1-local-icon-size: var(--theme1-global-icon-size-1);
  --theme1-local-icon-weight: var(--theme1-global-icon-weight-1);
}

/* Google Fonts (cdn) */
/*@import url('https://fonts.googleapis.com/icon?family=Material+Icons');*/
/* Note: this is a copy of the google class outputted by the import url above but with more custom styling */
.icon_1,
.icon_2,
.icon_3,
.icon_4,
.icon_5,
.icon_6 {
  display: inline-block;
  font-family: "Material Icons"; /* This must map to one of the the imported google font sets above. */
  font-style: normal;
  font-size: var(--theme1-local-icon-size, medium);
  font-weight: var(--theme1-local-icon-weight, 400);
  color: rgba(var(--theme1-local-icon-color), 1);
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  text-align: center;
  vertical-align: middle;
  text-transform: none;
  letter-spacing: normal;
  -ms-word-wrap: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  line-height: normal;
  -webkit-font-smoothing: never;
  /*-moz-osx-font-smoothing: never;*/
  /*font-smooth: never;*/
  text-rendering: geometricPrecision;
  touch-action: auto;
  /* "liga" spreads fonts out so all serifs are shown. poor browser support, however. */
  font-feature-settings: "liga";
  cursor: pointer;
  background: transparent;
}

/* google icon foundaries */
.icon_2 {
  font-family: "Material Icons"; /* this is the default again but could change */
}

.icon_3 {
  font-family: "Material Icons Two Tone";
}

.icon_4 {
  font-family: "Material Icons Round";
}

.icon_5 {
  font-family: "Material Icons Sharp";
}

.icon_6 {
  font-family: "Material Symbols Outlined";
  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
}

/* anchor icon wrapper styling */
.icon_anchor,
.icon_anchor i {
  display: inline-block;
  width: auto;
  height: auto;
  min-width: auto;
  min-height: auto;
  text-decoration: none;
  color: rgba(var(--theme1-local-icon-color), 0.6);
  background: transparent;
  padding: 0;
  margin: 0;
  text-align: center;
  vertical-align: middle;
  transition: color 0.5s ease;
}

.icon_anchor:link,
.icon_anchor:link i {
  color: rgba(var(--theme1-local-icon-color), 0.6);
  transition: color 300ms ease;
}

.icon_anchor:visited,
.icon_anchor:visited i {
  color: rgba(var(--theme1-local-icon-color), 0.6);
  transition: color 300ms ease;
}

.icon_anchor:hover,
.icon_anchor:hover i {
  color: rgba(var(--theme1-local-icon-color), 1);
  transition: color 300ms ease;
}

.icon_anchor:focus,
.icon_anchor:focus i {
  color: rgba(var(--theme1-local-icon-color), 1);
  transition: color 300ms ease;
}

.icon_anchor:active,
.icon_anchor:active i {
  color: rgba(var(--theme1-local-icon-color), 0.8);
  transition: color 300ms ease;
}