.fm-tag {
  display: inline-flex;
  max-width: 280px;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border: 1px solid;
  border-radius: 10px;
  font-size: 14px;
  line-height: 20px;
  text-decoration: none;
  transition: color 150ms ease, border-color 150ms ease;
}

.fm-tag:hover,
.fm-tag:focus-visible {
  text-decoration: none;
}

.fm-tag--general {
  color: #233b5e;
  border-color: #9abff4;
  background: #ddeafb;
}

.fm-tag--general:hover,
.fm-tag--general:focus-visible {
  color: #5794ec;
  border-color: #bcd4f7;
}

.fm-tag--advanced {
  color: #611a94;
  border-color: #ecd5fd;
  background: #faf4fe;
}

.fm-tag--advanced:hover,
.fm-tag--advanced:focus-visible {
  color: #a22bf6;
  border-color: #daaafb;
}

.fm-tag:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.features-page .fm-tag,
.platform-page .fm-tag {
  max-width: 100%;
  white-space: normal;
}

.features-page .fm-tag > span,
.platform-page .fm-tag > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.fm-tag-ico {
  flex: 0 0 auto;
  opacity: .85;
}

.fm-empty {
  padding: 2px 0;
  color: #999;
  font-size: 18px;
  line-height: 24px;
}
