/* Homepage SVG icons rendered as masks for exact CSS coloring. */

.homepage .site-nav-menu > summary > span {
    width: 20px;
    height: 20px;
    display: block;
    overflow: hidden;
    background: #fff;
    color: transparent;
    font-size: 0;
    -webkit-mask: url('/icons/menu.svg') center / contain no-repeat;
    mask: url('/icons/menu.svg') center / contain no-repeat;
}

.homepage .site-login-button {
    display: grid;
    place-items: center;
    overflow: hidden;
    background-image: none;
    color: transparent;
    font-size: 0;
}

.homepage .site-login-button::after {
    content: none;
}

.homepage .site-login-button::before {
    content: '';
    width: 21px;
    height: 21px;
    position: static;
    display: block;
    border: 0;
    border-radius: 0;
    background: #fff;
    transform: none;
    -webkit-mask: url('/icons/profile.svg') center / contain no-repeat;
    mask: url('/icons/profile.svg') center / contain no-repeat;
}

.homepage .search-composer {
    position: relative;
}

.homepage .search-composer::before {
    content: '';
    width: 18px;
    height: 18px;
    position: absolute;
    z-index: 2;
    top: 32px;
    left: 20px;
    background: #fff;
    pointer-events: none;
    -webkit-mask: url('/icons/search.svg') center / contain no-repeat;
    mask: url('/icons/search.svg') center / contain no-repeat;
}

.homepage .search-composer input {
    padding-left: 32px;
    background-image: none;
}

.homepage .composer-submit {
    position: relative;
    overflow: hidden;
    background-image: none;
    color: transparent;
    font-size: 0;
}

.homepage .composer-submit::before {
    content: '';
    width: 18px;
    height: 18px;
    position: absolute;
    inset: 0;
    margin: auto;
    background: #fff;
    -webkit-mask: url('/icons/up-arrow.svg') center / contain no-repeat;
    mask: url('/icons/up-arrow.svg') center / contain no-repeat;
}

.homepage .site-nav-panel .site-nav-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    display: inline-block;
    overflow: hidden;
    background: #fff;
    color: transparent;
    font-size: 0;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.homepage .site-nav-panel a[href^='/manga'] .site-nav-icon {
    -webkit-mask-image: url('/icons/manga.svg');
    mask-image: url('/icons/manga.svg');
}

.homepage .site-nav-panel a[href^='/events'] .site-nav-icon {
    -webkit-mask-image: url('/icons/events.svg');
    mask-image: url('/icons/events.svg');
}

.homepage .site-nav-panel a[href^='/jobs'] .site-nav-icon {
    -webkit-mask-image: url('/icons/jobs.svg');
    mask-image: url('/icons/jobs.svg');
}

.homepage .site-nav-panel a[href^='/marketplace'] .site-nav-icon {
    -webkit-mask-image: url('/icons/marketplace.svg');
    mask-image: url('/icons/marketplace.svg');
}

.homepage .site-nav-panel a[href^='/oracle'] .site-nav-icon {
    -webkit-mask-image: url('/icons/oracle.svg');
    mask-image: url('/icons/oracle.svg');
}

.homepage .site-nav-panel a[href^='/developer-tools'] .site-nav-icon,
.homepage .site-nav-panel a[href^='/api'] .site-nav-icon {
    -webkit-mask-image: url('/icons/developer-api.svg');
    mask-image: url('/icons/developer-api.svg');
}

.homepage .site-nav-panel a[href^='/business'] .site-nav-icon {
    -webkit-mask-image: url('/icons/business.svg');
    mask-image: url('/icons/business.svg');
}

.homepage .site-nav-panel a[href^='/bus-tracker'] .site-nav-icon {
    -webkit-mask-image: url('/icons/bus-tracker.svg');
    mask-image: url('/icons/bus-tracker.svg');
}

.homepage .site-nav-panel a[href^='/profile'] .site-nav-icon {
    -webkit-mask-image: url('/icons/profile.svg');
    mask-image: url('/icons/profile.svg');
}

.homepage .site-nav-panel a[href^='/search'] .site-nav-icon {
    -webkit-mask-image: url('/icons/search.svg');
    mask-image: url('/icons/search.svg');
}

@media (max-width: 700px) {
    .homepage .search-composer::before {
        width: 17px;
        height: 17px;
        top: 30px;
        left: 17px;
    }

    .homepage .search-composer input {
        padding-left: 29px;
    }
}