.single-share{
    max-width: 840px;
    margin: 0 auto;
    padding: 40px 24px 80px;
    >.share{
        display: flex;
        gap: 12px;
        >a,
        >button{
            > svg > *{
                transition: fill .3s;
            }
            &:hover> svg > *{
                &[fill="#990000"]{
                    fill: var(--color-secondary-1);
                }
                &[fill="white"]{
                    fill: var(--color-primary-2);
                }
            }
        }
    }
    >p{
        padding-left: 24px;
        border-left: 2px solid var(--color-primary-2);
        font-weight: 500;
        margin: 40px 0;
        white-space: pre-line;
    }
    >img{
        margin: 0 auto;
    }
}
.copy-btn{
    position: relative;
    >p{
        position: absolute;
        top: calc(100% + 10px);
        left: 50%;
        transform: translateX(-50%);
        width: max-content;
        pointer-events: none;
        padding: 2px 16px;
        border-radius: 6px;
        color: white;
        display: none;
        font-weight: 500;
        &.success{
            background-color: #179859;
        }
        &.fail{
            background-color: #D7383B;
        }
        &.active{
            display: initial;
        }
    }
}

@media screen and (width < 576px) {
    .single-share{
        padding: 40px 24px 60px;
        >p{
            padding-left: 12px;
        }
    }
}