/* Chirp icon system: SVG masks inherit currentColor. Nothing is hardcoded pink. */

.ui-icon,
.action-icon {
  display: inline-block;
  flex: 0 0 auto;
  color: currentColor;
  background: currentColor;
  -webkit-mask: var(--icon-url) center / contain no-repeat;
  mask: var(--icon-url) center / contain no-repeat;
}

.side-icon.ui-icon {
  width: 30px;
  height: 30px;
}

.action-icon {
  width: 24px;
  height: 24px;
}

.ui-icon-home {
  --icon-url: url('/assets/img/icons/home.svg');
}
.ui-icon-explore {
  --icon-url: url('/assets/img/icons/explore.svg');
}
.ui-icon-bell {
  --icon-url: url('/assets/img/icons/bell.svg');
}
.ui-icon-bookmark {
  --icon-url: url('/assets/img/icons/bookmark.svg');
}
.ui-icon-profile {
  --icon-url: url('/assets/img/icons/profile.svg');
}
.ui-icon-message {
  --icon-url: url('/assets/img/icons/message.svg');
}
.ui-icon-settings {
  --icon-url: url('/assets/img/icons/settings.svg');
}
.ui-icon-support {
  --icon-url: url('/assets/img/icons/support.svg');
}

.side-link.is-active .ui-icon-home,
body[data-page='home'] .side-link[data-route='home'] .ui-icon-home {
  --icon-url: url('/assets/img/icons/home-filled.svg');
}

.side-link.is-active .ui-icon-explore,
body[data-page='explore'] .side-link[data-route='explore'] .ui-icon-explore {
  --icon-url: url('/assets/img/icons/explore-filled.svg');
}

.side-link.is-active .ui-icon-bell,
body[data-page='notifications']
  .side-link[data-route='notifications']
  .ui-icon-bell {
  --icon-url: url('/assets/img/icons/bell-filled.svg');
}

.side-link.is-active .ui-icon-bookmark,
body[data-page='bookmarks']
  .side-link[data-route='bookmarks']
  .ui-icon-bookmark {
  --icon-url: url('/assets/img/icons/bookmark-filled.svg');
}

.side-link.is-active .ui-icon-profile,
body[data-page='profile'] .side-link[data-route='profile'] .ui-icon-profile {
  --icon-url: url('/assets/img/icons/profile-filled.svg');
}

.side-link.is-active .ui-icon-message,
body[data-page='messages'] .side-link[data-route='messages'] .ui-icon-message {
  --icon-url: url('/assets/img/icons/message-filled.svg');
}

.side-link:hover .ui-icon-chirpy,
.side-link.is-active .ui-icon-chirpy {
  filter: brightness(0) saturate(100%) invert(22%) sepia(92%) saturate(6633%)
    hue-rotate(315deg) brightness(91%) contrast(109%) !important;
}

body[data-page='home'] .side-link[data-route='home'],
body[data-page='explore'] .side-link[data-route='explore'],
body[data-page='notifications'] .side-link[data-route='notifications'],
body[data-page='bookmarks'] .side-link[data-route='bookmarks'],
body[data-page='profile'] .side-link[data-route='profile'],
body[data-page='messages'] .side-link[data-route='messages'],
body[data-page='chirpy'] .side-link[data-route='chirpy'],
body[data-page='settings'] .side-link[data-route='settings'],
body[data-page='support'] .side-link[data-route='support'] {
  color: var(--hot);
  background: var(--card-2);
}

.ui-icon-chirpy {
  width: 32px;
  height: 32px;
  background: transparent;
  -webkit-mask: none;
  mask: none;
  background-image: url('/assets/img/chirpypro.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.action-icon-like {
  --icon-url: url('/assets/img/icons/like.svg');
}
.action-icon-rechirp {
  --icon-url: url('/assets/img/icons/rechirp.svg');
}
.action-icon-bookmark {
  --icon-url: url('/assets/img/icons/bookmark.svg');
}
.action-icon-comment {
  --icon-url: url('/assets/img/icons/comment.svg');
}

.action-btn.is-active .action-icon-like {
  --icon-url: url('/assets/img/icons/like-filled.svg');
}
.action-btn.is-active .action-icon-rechirp {
  --icon-url: url('/assets/img/icons/rechirp-filled.svg');
}
.action-btn.is-active .action-icon-bookmark {
  --icon-url: url('/assets/img/icons/bookmark-filled.svg');
}

.action-btn {
  min-height: 42px;
  padding: 0 12px;
  gap: 8px;
}

.action-btn b {
  min-width: 1.2ch;
  text-align: left;
}

html[data-device='mobile'] .mobile-nav .side-icon.ui-icon {
  width: 31px;
  height: 31px;
}

html[data-device='mobile'] .mobile-nav .ui-icon-chirpy {
  width: 33px;
  height: 33px;
}