.rive-ui-file-name {
  padding: 0 0.5rem;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
}

.rive-ui-file-name-icon {
  display: inline-block;
  padding: 0 0.25rem;
  border-radius: 0.25rem;
  background-color: var(--rive-ui-color-text);
  color: var(--rive-ui-color-toolbar-bg);
  text-transform: uppercase;
  margin-right: 0.5em;
  font-family: monospace;
}

.rive-ui-file-name-icon-html {
  background: #e24c26;
  color: #fbfbfb;
}

.rive-ui-file-name-icon-css {
  background: #0477bb;
  color: #fbfbfb;
}

.rive-ui-file-name-icon-js,
.rive-ui-file-name-icon-jsx {
  background: #ebd64d;
  color: #323230;
}

.rive-ui-file-name-icon-ts,
.rive-ui-file-name-icon-tsx {
  background: #2f75c1;
  color: #fbfbfb;
}

.rive-ui-file-name-icon-json {
  background: #9273a3;
  color: #fbfbfb;
}