:root {
  --resource-icon-size: 32px;
}

.resource-icon {
  width: var(--resource-icon-size);
  height: var(--resource-icon-size);
  display: inline-block;
  flex: 0 0 auto;
  object-fit: contain;
  vertical-align: middle;
  filter: drop-shadow(0 3px 7px rgba(0, 0, 0, .34));
}

.resource-icon--compact { --resource-icon-size: 18px; }
.resource-icon--small { --resource-icon-size: 24px; }
.resource-icon--medium { --resource-icon-size: 38px; }
.resource-icon--large { --resource-icon-size: 56px; }

@media (prefers-reduced-motion: no-preference) {
  .resource-icon[data-emphasis="true"] {
    transition: transform 160ms ease, filter 160ms ease;
  }

  button:hover .resource-icon[data-emphasis="true"],
  a:hover .resource-icon[data-emphasis="true"] {
    transform: translateY(-1px);
    filter: drop-shadow(0 5px 10px rgba(0, 0, 0, .42));
  }
}