@font-face {
  font-family: "materialicons";
  src: url(../icons/materialicons-regular.woff) format("woff");
}

.Icon,
*[data-icon]:before {
  display: inline-block;
  position: relative;
  width: 40px;
  height: 40px;
  line-height: 40px;

  font-family: "materialicons";
  font-size: 24px;
  text-align: center;

  color: black;

  content: attr(data-icon);

  /* This is important for IE, which has it off by default */
  font-feature-settings: "liga" 1;
}

.Icon.-small {
  font-size: 18px;
}

.icon-toggled:before {
  color: #777777;
}

.icon-paused:before {
  color: gold;
}

/* used to draw the user's attention to an icon,
   ie: when audio is available but not enabled */
.icon-attention:before {
  animation: icon-attention-pulse 1.5s ease-in-out infinite;
}

@keyframes icon-attention-pulse {
  0%,
  100% {
    color: black;
    transform: scale(1);
  }

  50% {
    color: #0288d1;
    transform: scale(1.25);
  }
}

@media (prefers-reduced-motion: reduce) {
  .icon-attention:before {
    animation: none;
    color: #0288d1;
  }
}