.share-component {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.share-component-item {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.share-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.share-ai-icons {
    gap: 0.62rem;
}

.share-icons>a,
.share-icons>div {
    display: flex;
    align-items: center;
    justify-content: center;
	width: 1.25rem;
    height: 1.25rem;
    aspect-ratio: 1/1;
}

.share-icons>div {
    cursor: pointer;
}

.share-icons>a>svg,
.share-icons>div>img {
	max-width: 100%;
    max-height: 100%;
    filter: invert(36%) brightness(92%) saturate(0%);
}

.share-icons>a:hover>svg,
.share-icons>div:hover>img {
    filter: none;
}

.hw-blog-tech .share-icons>a.share-dark-icon:hover>svg,
.hw-blog-tech .share-icons>div.share-dark-icon:hover>img {
    filter: invert(100%);
}

.share-copy {
    position: relative;
    padding: 0.19rem;
}

.share-facebook {
    padding: 0.12rem 0.38rem;
}

.share-linkedin {
    padding: 0.06rem 0.09rem 0.12rem 0.09rem;
}

.share-twitter {
    padding: 0.25rem 0.25rem 0.13rem 0.25rem;
}

.share-ai-icons>a {
    padding: 0.06rem;
}

.share-ai-grok {
    padding-top: 0.12rem;
}

.share-copy::after {
    content: 'Copied!';
    position: absolute;
    background-color: #36E6CE;
    top: calc(100% + 0.5rem);
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.75rem;
    border-radius: 0.5rem;
    color: white;
    padding: 0.25rem 0.5rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.share-copy.copied::after {
    opacity: 1;
}


@media (max-width: 992px) {
    .share-component {
        flex-direction: row-reverse;
        justify-content: space-between;
    }

    .share-component-item:first-child {
        align-items: flex-end;
    }
}

@media (max-width: 415px) {
    .share-component {
        flex-direction: column;
    }
    .share-component-item:first-child {
        align-items: flex-start;
    }
}