/* Spill Sisters product icon system. Loaded after the legacy application CSS. */
.ss-supericon {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  flex: 0 0 auto;
  overflow: visible;
  fill: currentColor;
  vertical-align: -0.14em;
  transition: color 160ms ease, transform 160ms ease, filter 160ms ease;
}

button:hover > .ss-supericon,
button:hover > span > .ss-supericon,
a:hover > .ss-supericon {
  transform: translateY(-1px) scale(1.08);
}

button:active > .ss-supericon,
button:active > span > .ss-supericon,
a:active > .ss-supericon {
  transform: scale(0.94);
}

.nav-pill .ss-supericon,
.mobile-nav .ss-supericon,
.profile-menu .ss-supericon {
  width: 21px;
  height: 21px;
}

.nav-pill [data-supericon="house"],
.mobile-nav [data-supericon="house"] {
  color: #f02f79;
}

.nav-pill [data-supericon="users"] {
  color: #8066d6;
}

.nav-pill [data-supericon="bell-ringing"],
.profile-menu [data-supericon="bell-ringing"],
.notification-button [data-supericon="bell-ringing"] {
  color: #e85f69;
}

.nav-pill [data-supericon="chat-circle"],
.profile-menu [data-supericon="chat-circle"] {
  color: #4c8ed9;
}

.nav-pill [data-supericon="chat-centered-text"],
.mobile-nav [data-supericon="chat-centered-text"],
#adminButton [data-supericon="shield-check"],
[data-supericon="shield-check"] {
  color: #2d9b82;
}

.nav-pill [data-supericon="file"],
.profile-menu [data-supericon="file"] {
  color: #bc7b31;
}

.nav-pill.active .ss-supericon,
.mobile-nav button.active .ss-supericon {
  color: #f02f79;
  filter: drop-shadow(0 2px 5px rgba(240, 47, 121, 0.2));
}

.spill-button .ss-supericon,
.mobile-spill .ss-supericon,
.primary-button .ss-supericon {
  width: 22px;
  height: 22px;
  color: currentColor;
}

.spill-button:hover .ss-supericon,
.mobile-spill:hover .ss-supericon {
  transform: rotate(-8deg) scale(1.1);
}

.mode-toggle [data-supericon="moon"] {
  color: #8066d6;
}

.mode-toggle [data-supericon="sun"] {
  color: #d58b16;
}

.top-search [data-supericon="magnifying-glass"] {
  color: #c1416b;
}

body.logged-in .story-actions.post-actions,
body.logged-in .story-card > .story-actions.post-actions,
body.logged-in .story-card > .story-actions.simple-actions,
body.logged-in.story-view .story-page-actions.simple-actions {
  gap: 2px !important;
}

body.logged-in .story-action,
body.logged-in .story-actions .story-action,
body.logged-in .story-card > .story-actions .story-action,
body.logged-in.story-view .story-page-actions .story-action,
body.dark-mode.logged-in .story-action,
.story-action,
.take-icon-button {
  width: auto !important;
  min-width: 40px !important;
  height: auto !important;
  min-height: 40px !important;
  padding: 6px 9px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.logged-in .story-action.has-count,
.story-action.has-count {
  min-width: 48px !important;
  gap: 5px !important;
}

.story-action .ss-supericon,
.take-icon-button .ss-supericon {
  width: 21px;
  height: 21px;
}

.story-action-count,
.take-icon-button span {
  color: currentColor !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

body.logged-in .story-action.boost-action,
body.logged-in .story-action[data-reaction="gasp"],
.take-icon-button[data-comment-action="like"] {
  color: #f02f79 !important;
}

body.logged-in .story-action.icon-comment-action {
  color: #8066d6 !important;
}

body.logged-in .story-action.icon-save-action {
  color: #d77735 !important;
}

body.logged-in .story-action.icon-share-action,
body.logged-in .story-action[data-story-share] {
  color: #2d9b82 !important;
}

body.logged-in .story-action.icon-more-action,
body.logged-in .story-action.report-action {
  color: #756970 !important;
}

body.logged-in .story-action:hover,
body.logged-in .story-action:focus-visible,
body.dark-mode.logged-in .story-action:hover,
body.dark-mode.logged-in .story-action:focus-visible,
.take-icon-button:hover,
.take-icon-button:focus-visible {
  border: 0 !important;
  background: color-mix(in srgb, currentColor 9%, transparent) !important;
  box-shadow: none !important;
}

body.logged-in .story-action[data-active="true"],
body.dark-mode.logged-in .story-action[data-active="true"] {
  border: 0 !important;
  background: color-mix(in srgb, currentColor 12%, transparent) !important;
}

.story-action[data-active="true"] [data-supericon="heart"] {
  transform: scale(1.1);
  filter: drop-shadow(0 2px 5px rgba(240, 47, 121, 0.24));
}

[data-gif-picker-toggle] [data-supericon="gif"],
.comment-gif-button [data-supericon="gif"] {
  color: #8066d6;
}

[data-gif-picker-toggle]:hover [data-supericon="gif"],
.comment-gif-button:hover [data-supericon="gif"] {
  transform: rotate(-4deg) scale(1.08);
}

.composer-media-button [data-supericon="image"],
label[for="composerMedia"] [data-supericon="image"] {
  color: #2d9b82;
}

body.dark-mode.logged-in .nav-pill [data-supericon],
body.dark-mode.logged-in .mobile-nav [data-supericon] {
  filter: saturate(0.9) brightness(1.2);
}

body.dark-mode.logged-in .story-action:hover,
body.dark-mode.logged-in .take-icon-button:hover,
body.dark-mode.logged-in .story-action[data-active="true"] {
  background: color-mix(in srgb, currentColor 15%, transparent) !important;
}

@media (max-width: 900px) {
  .mobile-nav button {
    min-height: 48px;
  }

  .mobile-nav .ss-supericon {
    width: 22px;
    height: 22px;
  }

  body.logged-in .story-action,
  body.logged-in .story-actions .story-action,
  body.logged-in .story-card > .story-actions .story-action,
  body.logged-in.story-view .story-page-actions .story-action,
  .story-action,
  .take-icon-button {
    min-width: 44px !important;
    min-height: 44px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ss-supericon,
  button:hover > .ss-supericon,
  button:active > .ss-supericon,
  a:hover > .ss-supericon,
  a:active > .ss-supericon {
    transition: none !important;
    transform: none !important;
  }
}

.story-action[data-active="true"] [data-supericon="heart-fill"],
.story-action[data-active="true"] [data-supericon="bookmark-fill"],
.take-icon-button[data-active="true"] [data-supericon="heart-fill"] {
  color: #f02f79;
  transform: scale(1.08);
  filter: drop-shadow(0 2px 5px rgba(240, 47, 121, 0.22));
}

.take-icon-button[data-active="true"] {
  color: #f02f79 !important;
}