/**
 * Icon for the "Share Your Feedback" link in the customer account menu.
 *
 * The theme draws its nav icons from `li.swp-*:before`, but Magento hardcodes the
 * <li> class to "nav item" - a link block's `attributes` argument lands on the <a>.
 * So the icon is attached to the anchor here, using the same 20px box and 15px
 * offset the theme uses, to sit flush with the surrounding items.
 */
.account-nav-content ul li.nav.item > a.swp-customer-feedback,
.account-nav ul li.nav.item > a.swp-customer-feedback {
    position: relative;
    display: block;
}

.account-nav-content ul li.nav.item > a.swp-customer-feedback:before,
.account-nav ul li.nav.item > a.swp-customer-feedback:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background-image: url('../images/feedback.svg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 18;
}

/*
 * On hover the theme fills the pill blue and flips its icons to white with this
 * filter. The feedback icon needs the same treatment or it stays dark and
 * disappears against the blue.
 *
 * Matched on the <li>, not the <a>, so the icon turns white at the same moment
 * the pill does, wherever the pointer is inside the row.
 *
 * `.current` is included for consistency with the theme's own rule, though the
 * survey page is 1column and drops the account nav, so it will not trigger here.
 */
.account-nav-content ul li.nav.item:hover > a.swp-customer-feedback:before,
.account-nav-content ul li.nav.item.current > a.swp-customer-feedback:before,
.account-nav ul li.nav.item:hover > a.swp-customer-feedback:before,
.account-nav ul li.nav.item.current > a.swp-customer-feedback:before {
    filter: brightness(0) invert(1);
}