/* LinkedIn feed post recreation. */
.li {
  --li-card: #fff;
  --li-text: rgba(0, 0, 0, 0.9);
  --li-dim: rgba(0, 0, 0, 0.6);
  --li-line: rgba(140, 140, 140, 0.2);
  --li-hover: rgba(0, 0, 0, 0.08);
  --li-blue: #0a66c2;
  --li-bubble: #f2f2f2;
  --li-media: #f3f2ef;
  position: relative;
  max-width: 555px;
  padding-top: 12px;
  background: var(--li-card);
  color: var(--li-text);
  border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(140, 140, 140, 0.2), 0 2px 3px rgba(0, 0, 0, 0.04);
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Fira Sans", Ubuntu, Oxygen, "Oxygen Sans", Cantarell, "Droid Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Lucida Grande", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-feature-settings: normal;
  letter-spacing: normal;
  text-align: left;
  -webkit-font-smoothing: antialiased;
}
:root[data-theme="dark"] .li {
  --li-card: #1b1f23;
  --li-text: rgba(255, 255, 255, 0.9);
  --li-dim: rgba(255, 255, 255, 0.6);
  --li-line: rgba(255, 255, 255, 0.12);
  --li-hover: rgba(255, 255, 255, 0.08);
  --li-blue: #71b7fb;
  --li-bubble: #2c3136;
  --li-media: #2a2f34;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.li a { color: inherit; text-decoration: none; }
:where(.li) button { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.li svg { display: block; fill: currentColor; }

.li-head { display: flex; align-items: flex-start; gap: 8px; padding: 0 16px; }
.li-av { display: block; flex: none; width: 48px; height: 48px; border-radius: 50%; overflow: hidden; background: var(--li-media); }
.li-av.sm { width: 32px; height: 32px; }
.li-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.li-av .ini { display: grid; place-items: center; width: 100%; height: 100%; font-weight: 600; font-size: 18px; color: var(--li-dim); }
.li-av.sm .ini { font-size: 13px; }
.li-who { flex: 1; min-width: 0; }
.li-name { display: flex; align-items: baseline; gap: 4px; font-size: 14px; line-height: 20px; }
.li-name b { font-weight: 600; }
.li-name b:hover { color: var(--li-blue); text-decoration: underline; }
.li-name .deg { color: var(--li-dim); font-weight: 400; }
.li-sub { display: block; font-size: 12px; line-height: 16px; color: var(--li-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.li-time { display: flex; align-items: center; gap: 4px; }
.li-time svg { width: 16px; height: 16px; }
.li-follow {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  margin-top: -4px;
  padding: 0 8px;
  border-radius: 4px;
  color: var(--li-blue) !important;
  font-size: 16px !important;
  font-weight: 600;
  transition: background-color 160ms;
}
.li-follow svg { width: 16px; height: 16px; }
.li-follow:hover { background: rgba(10, 102, 194, 0.1); }
.li-follow[aria-pressed="true"] { color: var(--li-dim) !important; }

.li-text { position: relative; margin: 8px 16px 0; white-space: pre-wrap; overflow-wrap: break-word; }
.li-text .more { color: var(--li-dim); }
.li-text .more:hover { color: var(--li-blue); text-decoration: underline; }
.li-text .lk { color: var(--li-blue); font-weight: 600; }

.li-media { position: relative; margin-top: 8px; background: var(--li-media); }
.li-media-file { display: block; width: 100%; height: auto; object-fit: cover; }
.li-media .play.on-poster { position: absolute; left: 50%; top: 50%; margin: 0; transform: translate(-50%, -50%); width: 64px; height: 64px; display: grid; place-items: center; border-radius: 9999px; background: rgba(0, 0, 0, 0.6); border: 2px solid rgba(255, 255, 255, 0.9); }
.li-media .play.on-poster svg { width: 26px; height: 26px; fill: #fff; margin-left: 3px; }
.li-dur { position: absolute; right: 12px; bottom: 12px; padding: 0 6px; border-radius: 4px; background: rgba(0, 0, 0, 0.7); color: #fff; font-size: 12px; line-height: 20px; }
.li-media .slot { border: 0; border-radius: 0; background: transparent; height: 100%; }
.li-media .slot-label { color: var(--li-dim); font-family: inherit; font-size: 14px; }
.li-media .play {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
}
.li-media .play svg { width: 24px; height: 24px; fill: #fff; margin-left: 3px; }

.li-counts {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 16px;
  font-size: 12px;
  line-height: 16px;
  color: var(--li-dim);
}
.li-reacts { display: flex; align-items: center; gap: 4px; }
.li-reacts .stack { display: flex; }
.li-reacts .stack svg { width: 16px; height: 16px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--li-card); }
.li-reacts .stack svg + svg { margin-left: -3px; }
.li-counts .right a:hover { color: var(--li-blue); text-decoration: underline; }

.li-actions {
  display: flex;
  margin: 0 16px;
  padding: 4px 0;
  border-top: 1px solid var(--li-line);
}
.li-act {
  flex: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 48px;
  padding: 10px 4px;
  border-radius: 4px;
  color: var(--li-dim) !important;
  font-size: 14px;
  font-weight: 600;
  transition: background-color 160ms;
}
.li-act svg { width: 24px; height: 24px; flex: none; }
@media (max-width: 420px) { .li-act { font-size: 13px; gap: 3px; } }
.li-act:hover { background: var(--li-hover); }
.li-act[aria-pressed="true"] { color: var(--li-blue) !important; }
.li-act .fill { display: none; }
.li-act[aria-pressed="true"] .fill { display: block; }
.li-act[aria-pressed="true"] .outline { display: none; }
.li-act.pop svg { animation: x-pop 320ms cubic-bezier(0.2, 0.9, 0.3, 1.3); }

.li-comments { padding: 4px 16px 12px; }
.li-sort { padding: 4px 0 8px; font-size: 12px; font-weight: 600; color: var(--li-dim); }
.li-comment { display: flex; gap: 4px; }
.li-comment .li-av { margin-right: 4px; }
.li-bubble { flex: 1; min-width: 0; padding: 8px 12px 10px; border-radius: 0 8px 8px 8px; background: var(--li-bubble); }
.li-bubble .top { display: flex; justify-content: space-between; gap: 8px; }
.li-bubble .nm { font-size: 14px; font-weight: 600; line-height: 20px; }
.li-bubble .nm .au { margin-left: 4px; padding: 0 4px; border-radius: 2px; background: #56687a; color: #fff; font-size: 12px; font-weight: 600; line-height: 16px; }
.li-bubble .t { font-size: 12px; color: var(--li-dim); }
.li-bubble .txt { margin-top: 8px; white-space: pre-wrap; }
.li-bubble .lk { color: var(--li-blue); font-weight: 600; }
.li-cacts { display: flex; gap: 4px; padding: 2px 0 0 44px; font-size: 12px; font-weight: 600; color: var(--li-dim); }
.li-cacts button { padding: 2px 4px; border-radius: 2px; }
.li-cacts button:hover { background: var(--li-hover); }