:root {
  --sh-red: #991b1b;
  --sh-red-dark: #070707;
}

/*
 * Osnovna custom SVG ikona
 *
 * Zunanji element podeduje:
 * - width
 * - height
 * - font-size
 * - color
 * - background
 *
 * Dejanska SVG maska je izrisana v ::before.
 */
.sh-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: inherit;
  vertical-align: middle;
}

.sh-icon::before {
  content: "";
  display: block;
  width: 1em;
  height: 1em;
  flex: 0 0 1em;
  background-color: currentColor;

  mask-image: var(--sh-icon-image);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;

  -webkit-mask-image: var(--sh-icon-image);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;

  transition:
    background-color 0.18s ease,
    transform 0.18s ease,
    opacity 0.18s ease;
}

/*
 * Velikosti simbola
 *
 * Velikost določa font-size, zato se širina in višina
 * zunanjega elementa ne prepišeta.
 */
.sh-icon-xs {
  font-size: 18px;
}

.sh-icon-sm {
  font-size: 24px;
}

.sh-icon-md {
  font-size: 42px;
}

.sh-icon-lg {
  font-size: 56px;
}

.sh-icon-xl {
  font-size: 72px;
}

/*
 * Barve simbola
 */
.sh-icon-color-red {
  color: var(--sh-red);
}

.sh-icon-color-black {
  color: #000;
}

.sh-icon-color-white {
  color: #fff;
}

.sh-icon-color-inherit {
  color: inherit;
}

/*
 * Hover neposredno na ikoni
 */
.sh-icon-hover {
  transition:
    color 0.18s ease,
    transform 0.18s ease,
    opacity 0.18s ease;
}

.sh-icon-hover:hover {
  color: var(--sh-red-dark);
  transform: translateY(-1px);
}

/*
 * Hover prek povezave ali gumba
 */
a:hover .sh-icon-hover,
button:hover .sh-icon-hover {
  color: var(--sh-red-dark);
}

a:hover .sh-icon-hover::before,
button:hover .sh-icon-hover::before {
  transform: translateY(-1px);
}

/*
 * Ikone za statistike
 */
.sh-stat-icon {
  font-size: 32px;
}

/*
 * Posamezne SVG ikone
 */
.sh-icon-harmonika {
  --sh-icon-image: url("/assets/icons/icon_svetharmonik.svg");
}