/* Icon Styles */

/* Google Materical Icon CDN is used. I am importing them here so all dependencies are managed in this one file. */
@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 {

  /* DEFAULT ICON SETTINGS */
  --theme1-local-icon-family: "Material Icons";
  --theme1-local-icon-color: 0,0,0;
  --theme1-local-icon-size: 1rem;/* Inherits from the html-body "medium" setting and transpates to rem units. */
  --theme1-local-icon-weight: 400;

  /* If this project uses global variables like the Fashion theme, you can use these mappings. */
  /*--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);*/
  /*--theme1-local-icon-family: ???;*/

}

/* 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: var(--theme1-local-icon-family, inherit);/* 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: var(--theme1-local-icon-family, inherit);/* this is the default again but could change */
}

.icon_3 {
  font-family: "Material Icons Two Tone";/* note this is a dependency using google icons */
}

.icon_4 {
  font-family: "Material Icons Round";/* note this is a dependency using google icons */
}

.icon_5 {
  font-family: "Material Icons Sharp";/* note this is a dependency using google icons */
}

.icon_6 {
  font-family: "Material Symbols Outlined";/* note this is a dependency using google icons */
  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), 1);
  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), 1);
  transition: color 300ms ease;
}

.icon_anchor:visited,
.icon_anchor:visited i {
  color: rgba(var(--theme1-local-icon-color), 1);
  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), 1);
  transition: color 300ms ease;
}