// ============================================================================
// Components | Social Share
// ============================================================================

@use "../../dev" as *;
@use "../../variables" as *;

@use "../head_layout" as *;

@use "../soul_type" as *;

// .social_share {
//     height:             q(4);
//     max-height:         q(4);
//     font-size:          0px;
//     bottom:             0;
//     display: inline-block;
//     .social_share_list {
//         display:            flex;
//         justify-content:    left;
//         margin:             0px 0;
//         padding:            0px 0;
//         .social_share_list__item {
//             padding-top:        0;
//             padding-right:      $q *  2;
//             padding-bottom:     0;
//             padding-left:       0;
//             list-style-type:    none;
//             -webkit-user-select:none;
//             -moz-user-select:   none;
//             &:last-child {
//                 padding-right:      0px;
//             }
//             .social_share_icon {
//                 width:              $q *  3;
//                 height:             $q *  3;
//                 padding-top:        0;
//                 padding-right:      $q;
//                 padding-bottom:     0;
//                 padding-left:       $q;
//                 color:              var(--color_fill_primary);
//                 border-bottom:      none;
//                 display:            block;
//                 text-align:         center;
//             }
//         }
//     }
// }

// Vossi
// .social-share_compact {
//     text-align: right;
//     display: var(--social-sharing-display);
//     margin-top: var(--social-sharing-margin-top);
// }
// .social-share_compact__share-links {
//     visibility: hidden;
//     opacity: 0;
//     transition:
//         opacity 0.6s ease 0s,
//         visibility 0.6s ease 0s;
//     padding-right: q(8);
//     border-right: q(1) solid #e6e6e6;
//     position: relative;
// }
// .social-share_compact__share-links.active {
//     visibility: visible;
//     opacity: 1;
// }
// .social-share_compact__open {
//     display: inline-block;
// }
// .social-share_compact__close,
// .social-share_compact__open.active {
//     display: none;
// }
// .social-share_compact__close.active {
//     display: inline-block;
// }
// .social-share_compact button {
//     background: 0 0;
//     border: none;
//     padding: 0;
// }
// .social-share_compact button:hover {
//     cursor: pointer;
// }
// .social-share_compact__share {
//     text-decoration: none;
// }
// .social-share_compact__share .icon-social-twitter {
//     fill: var(--social-sharing-twitter-fill);
// }
// .social-share_compact__share .icon-social-facebook {
//     fill: var(--social-sharing-facebook-fill);
// }
// .social-share_compact__share .icon-social-email-fill {
//     fill: var(--social-sharing-email-fill);
// }
// .social-share_compact__share .icon-ui-link {
//     fill: var(--social-sharing-link-fill);
// }
// .social-share_compact__share:hover {
//     fill: #6e6e6e;
//     transition: fill 0.2s;
// }
// .social-share_compact__close,
// .social-share_compact__open {
//     fill: var(--social-sharing-open-close-fill);
// }
// .social-share_compact__close:hover,
// .social-share_compact__open:hover {
//     fill: var(--color_text_primary);
// }
// .social-share_compact__copied {
//     visibility: hidden;
//     display: inline-flex;
//     background-color: #333;
//     color: var(--color_fill_primary);
//     fill: var(--color_fill_primary);
//     border-radius: 50px;
//     padding: 0 q(4);
//     position: absolute;
//     z-index: 1;
//     font-size: q(10);
//     align-items: center;
//     justify-content: space-evenly;
//     bottom: 3q(2);
//     left: unset;
//     right: 0;
// }
// .social-share_compact__copied svg {
//     width: 12%;
// }
// .social-share_compact__copied.show {
//     visibility: visible;
//     animation: fadein 0.5s;
// }

// .facebook {
//     margin-bottom: q(8);
//     margin-top: q(8);
//     text-align: center;
// }

// .facebook__error-text {
//     color: #1c2022;
//     font-family: var(--theme-font-family);
//     font-size: q(16);
// }

// .facebook__post,
// .facebook__post--error {
//     margin: 0;
// }

// .facebook__post--removed {
//     border: q(1) solid #e1e8ed;
//     border-radius: q(4);
//     display: none;
//     margin-bottom: q(16);
//     padding: q(16);
//     width: q(460);
// }

// .facebook__post .fb-post {
//     display: inline;
//     padding-bottom: 1q(5);
//     padding-top: q(5);
//     overflow: hidden;
// }

// .facebook__post--edit {
//     background-color: #e3f2fd;
//     margin: 0;
// }

// .facebook__post--edit .facebook__post--removed {
//     display: block;
//     margin-bottom: q(16);
// }

// .instagram {
//     margin-bottom: q(8);
//     margin-top: q(8);
// }

// .instagram__error-text {
//     color: #1c2022;
//     font-family: var(--theme-font-family);
//     font-size: q(16);
// }

// .instagram__post {
//     margin-left: auto;
//     margin-right: auto;
//     max-width: 540px;
// }

// .instagram__post--error {
//     margin: 0;
// }

// .instagram__post--removed {
//     border: q(1) solid #e1e8ed;
//     border-radius: q(4);
//     display: none;
//     margin-bottom: q(16);
//     padding: q(16);
//     width: q(460);
// }

// .instagram__post--edit {
//     margin: 0;
//     visibility: visible;
// }

// .instagram__post--edit .instagram__post--removed {
//     display: block;
//     background-color: #e3f2fd;
//     margin-bottom: q(16);
// }

.soundcloud,
.tiktok {
    margin-bottom: q(8);
    margin-top: q(8);
}

.soundcloud__posts {
    margin: 0;
}

.soundcloud__posts--error {
    background-color: #e3f2fd;
    margin: 0;
}

.soundcloud__posts .soundcloud__post--removed {
    background-color: #e3f2fd;
    border-radius: q(4);
    border: q(1) solid #e1e8ed;
    display: none;
    margin-bottom: q(16);
    padding: q(16);
    width: q(460);
}

.soundcloud__posts--edit {
    margin: 0;
    visibility: visible;
}

.soundcloud__posts--edit .soundcloud__post--removed {
    background-color: #e3f2fd;
    margin-bottom: q(16);
    display: block;
}

.soundcloud iframe {
    height: 166px;
}

.tiktok__error-text {
    color: #1c2022;
}

.tiktok__post {
    margin: 0;
}

.tiktok__post--removed {
    border: q(1) solid #e1e8ed;
    border-radius: q(4);
    display: none;
    margin-bottom: q(16);
    padding: q(16);
    width: q(460);
}

.tiktok__post--edit {
    visibility: visible;
}

.tiktok__post--edit .tiktok__post--removed {
    background-color: #e3f2fd;
    margin-bottom: q(16);
    display: block;
}

.twitter__error-text {
    color: var(--color_text_primary);
}

.twitter__tweet {
    max-width: 540px;
    margin: 1em auto;
}

.twitter__tweet--removed {
    border: q(1) solid #e1e8ed;
    border-radius: q(4);
    display: none;
    margin-bottom: q(16);
    padding: q(16);
    width: q(460);
}

.twitter__tweet--error {
    margin: 0;
}

.twitter__tweet--error .twitter__tweet--removed {
    display: flex;
}

.twitter__tweet--edit {
    background-color: #e3f2fd;
    margin: 0;
    visibility: visible;
}

.twitter__tweet--edit .twitter__tweet {
    padding-bottom: q(16);
    padding-top: q(4);
    visibility: visible;
}

.twitter__tweet--edit .twitter__tweet--removed {
    margin-bottom: q(16);
}

@media screen and (max-width: 57q(4)) {
    body:not(.layout-homepage-mobile.kiln-edit-mode):not(
            .layout-homepage-mobile-app.kiln-edit-mode
        )
        .twitter__tweet {
        max-width: 32Q (5);
    }
}

@media screen and (min-width: 960px) and (max-width: 104q(2)) {
    body:not(.layout-homepage-mobile.kiln-edit-mode):not(
            .layout-homepage-mobile-app.kiln-edit-mode
        )
        .twitter__tweet {
        max-width: 32Q (5);
    }
}

.youtube {
    margin: q(16) 0;
}

.youtube__aspect-ratio-container {
    display: flex;
    position: relative;
    justify-content: center;
    overflow: hidden;
    height: 0;
    padding-top: 56.25%;
    margin-bottom: q(16);
    clear: both;
}

.youtube__aspect-ratio-container::before {
    background-color: var(--color_text_primary);
    bottom: 0;
    content: "";
    display: inline-block;
    padding-top: 56.25%;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    z-index: -1;
}

.youtube__content {
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    border: none;
    width: 100%;
    height: 100%;
}

.youtube__content:focus .youtube__video-thumbnail-play-button,
.youtube__content:hover .youtube__video-thumbnail-play-button {
    background: red;
}

.youtube__video-thumbnail {
    position: absolute;
    width: 100%;
    top: 0;
    bottom: 0;
    margin: auto;
}

.youtube__video-thumbnail-play-button {
    height: q(50);
    text-align: center;
    font: q(40) sans-serif;
    color: var(--color_fill_primary);
    text-shadow: 0 0 0.5em #000;
    width: q(68);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #212121;
    opacity: 0.8;
    z-index: 1;
    border-radius: q(14);
}

.youtube__video-title {
    color: var(--color_fill_primary);
    font: q(18) sans-serif;
    text-overflow: ellipsis;
    position: absolute;
    top: q(20);
    left: q(20);
    z-index: 1;
}

.youtube__video-thumbnail-play-button::after {
    content: "\25B6 \FE0E";
    color: var(--color_fill_primary);
    display: inline-block;
    position: absolute;
    top: q(5);
    left: q(16);
    width: q(40);
    height: q(40);
    z-index: 2;
    font: q(32) sans-serif;
}

@media screen and (max-width: 479px) {
    body:not(.layout-homepage-mobile.kiln-edit-mode):not(
            .layout-homepage-mobile-app.kiln-edit-mode
        )
        .youtube__video-thumbnail-play-button::after {
        top: 0;
    }
}

.social-share {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--theme-component-social-share-gap);
}

.social-share {
    display: var(--social-sharing-display);
    margin-top: var(--social-sharing-margin-top);
}

.social-share button {
    background: 0 0;
    border: none;
    padding: 0;
}

.social-share button:hover {
    cursor: pointer;
}

.social-share__share-links {
    position: relative;
}

.social-share__share {
    text-decoration: none;
}

.social-share__share .icon-social-twitter {
    fill: var(--social-sharing-twitter-fill);
}

.social-share__share .icon-social-facebook {
    fill: var(--social-sharing-facebook-fill);
}

.social-share__share .icon-social-email-fill {
    fill: var(--social-sharing-email-fill);
}

.social-share__share .icon-ui-link {
    fill: var(--social-sharing-link-fill);
}

.social-share__share:hover {
    fill: #6e6e6e;
    transition: fill 0.2s;
}

.social-share__close,
.social-share__open {
    display: none;
    fill: var(--social-sharing-open-close-fill);
}

.social-share__close:hover,
.social-share__open:hover {
    fill: var(--color_text_primary);
}

.social-share__copied {
    visibility: hidden;
    display: inline-flex;
    background-color: #333;
    color: var(--color_fill_primary);
    fill: var(--color_fill_primary);
    border-radius: 50px;
    padding: 0 q(4);
    position: absolute;
    z-index: 1;
    font-size: q(10);
    align-items: center;
    justify-content: space-evenly;
    bottom: q(32);
    left: q(72);
    right: -q(32);
}

.social-share__copied svg {
    width: 12%;
}

.social-share__copied.show {
    visibility: visible;
    animation: fadein 0.5s;
}