/* SharpEdge premium bottom navigation active state. */
.bottom-nav .nav-item {
  color: #171514 !important;
}

.bottom-nav .nav-item__core,
.bottom-nav .nav-icon-shell,
.bottom-nav .nav-icon,
.bottom-nav .nav-label {
  transition: background .22s ease, color .22s ease, box-shadow .22s ease, transform .22s ease !important;
}

.bottom-nav .nav-item.active {
  color: #93600f !important;
}

.bottom-nav .nav-item.active::after,
.bottom-nav .nav-item.active .nav-item__core::before,
.bottom-nav .nav-item.active .nav-item__core::after,
.bottom-nav .nav-item.active .nav-icon-shell::before,
.bottom-nav .nav-item.active .nav-icon-shell::after {
  opacity: 0 !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
}

.bottom-nav .nav-item.active .nav-item__core {
  color: #93600f !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 241, 199, .68) 0%, rgba(255, 246, 224, .38) 52%, rgba(255, 255, 255, 0) 78%),
    linear-gradient(180deg, rgba(255, 250, 239, .96) 0%, rgba(246, 234, 211, .84) 100%) !important;
  border-radius: 22px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .92),
    inset 0 0 0 1px rgba(203, 153, 48, .16),
    0 8px 18px rgba(115, 79, 24, .08) !important;
  transform: none !important;
}

.bottom-nav .nav-item.active .nav-icon-shell {
  color: #a87518 !important;
  background: linear-gradient(180deg, rgba(235, 196, 93, .18) 0%, rgba(166, 103, 17, .08) 100%) !important;
  border: 1px solid rgba(181, 125, 25, .18) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .76) !important;
  transform: none !important;
}

.bottom-nav .nav-item.active .nav-icon {
  color: #a87518 !important;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .55)) !important;
  transform: none !important;
}

.bottom-nav .nav-item.active .nav-label {
  color: #8a5a10 !important;
  opacity: 1 !important;
  text-shadow: none !important;
  transform: none !important;
}

.bottom-nav .nav-item:not(.active) .nav-icon,
.bottom-nav .nav-item:not(.active) .nav-label {
  color: #171514 !important;
  text-shadow: none !important;
  filter: none !important;
}

.bottom-nav .nav-item:not(.active):hover .nav-icon-shell,
.bottom-nav .nav-item:not(.active):hover .nav-icon,
.bottom-nav .nav-item:not(.active):hover .nav-label {
  color: #8a5a10 !important;
  filter: none !important;
  text-shadow: none !important;
}