.SyncCardReplicationArea{
    margin-top: 0.693em;
    margin-left:4px;
    .ReplicationAreaNew {
        display: flex;
        width: 100%;
        justify-content: space-around;
        align-items: center;
        .ReplicationInfoAreaWrapper{
            // Lumina: column layout and spacing between timestamp rows (Figma)
            &.ReplicationInfoAreaWrapper--lumina {
                display: flex;
                flex-direction: column;
                gap: 16px;
            }
            .ReplicationTimestampVisualization{
                display: flex;
                align-items:baseline ;
                .InfoString{
                    font-family: "Regular";
                    font-size: 11px;
                    text-align: right;
                    flex: 1;
                    margin-right: 12px;
                }
                .TimeStamp{
                    font-family: "Light";
                    font-size: 14px;
                  }
                // Lumina: timestamp and label styling so Last Download / Last Upload align
                &.ReplicationTimestampVisualization--lumina {
                    .TimeStamp {
                        font-family: var(--slds-g-font-family);
                        font-weight: var(--slds-g-font-weight-6);
                    }
                    .InfoString {
                        font-family: var(--slds-g-font-family);
                        font-weight: var(--slds-g-font-weight-4);
                        text-align: left;
                        width: 120px;
                        flex: 0 0 120px;
                        margin-right: var(--slds-g-spacing-3);
                        box-sizing: border-box;
                        font-size: var(--slds-g-font-scale-1);
                    }
                }
            }
        }
        .ReplicationButtonWrapper{
            .ReplicationButton{
                font-size: 0.5em;
                margin-left: 2px;
                button{
                    background: inherit;
                    div{
                        i{
                            margin-left: 1px;
                            margin-right: 1px;
                            font-size: 2.4em;
                        }
                    }
                }
            }
        }
        .SyncHealthIndicatorWrapper {
            margin-left: auto;
            display: flex;
            padding-top: 1px;
            .SyncHealthIndicator {
                max-width: 2.050em;
                max-height: 2.050em;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
}

.SyncCardDetailArea{
    padding: 0.693em 0.925em;
    display: flex;
    &.SyncCardDetailArea--lumina {
        background: transparent;
        padding: 0;
        display: block;
        text-align: center;
        .ImageArea {
            display: inline-block;
            vertical-align: middle;
            max-width: none;
            max-height: none;
            width: 20px;
            height: 20px;
            margin-right: var(--slds-g-spacing-2);
        }
        .InfoArea {
            display: inline;
            color: var(--slds-g-color-neutral-base-20);
            font-family: var(--slds-g-font-family);
            font-size: var(--slds-g-font-scale-2);
            font-style: normal;
            font-weight: var(--slds-g-font-weight-7); /* 700 */
            line-height: 21px; /* 131.25% */
            .Light--lumina, .LastTextInfo--lumina {
                font-weight: var(--slds-g-font-weight-4); /* 400 */
            }
            .LastTextInfo--lumina::before {
                content: " ";
            }
        }
    }
    .ImageArea{
        max-width: 0.925em;
        max-height: 1em;
        margin-right : 0.462em;
        img{
            width: 100%;
            height: 100%;
        }
    }
    .ImageArea.CloudIcons {
        max-width: 2.080em;
        max-height: 1em;
        margin-right: 0.520em;
    }
    // Warn icon (pending uploads) in Lumina: use SLDS warning orange; layout from design spec
    .SyncCardDetailArea-warnIcon {
        background-color: var(--slds-g-color-border-warning-1);
        width: 20px;
        height: 20px;
        aspect-ratio: 1 / 1;
    }
    .InfoArea{
        display: inline-block;
        font-size: 13px;
        font-family: "SemiBold";
        align-content: center;
        margin:auto 0px;
        flex: 1;
        span{
            line-height: 1.154em;
        }
        .Light{
            font-family: "Light";
        }
        .LastTextInfo{
            font-family: "Light";
        }
        .LastTextInfo::before{
            content:" ";
        }
    }
}

// SyncModePicker: last sync failed message above buttons (icon + text); uses default text color
.SyncModePicker-lastSyncFailed {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--slds-g-spacing-2);
    font-size: 14px;
    padding: 0 0 8px 0;
    box-sizing: border-box;

    .SyncModePicker-lastSyncFailed-icon {
        flex-shrink: 0;
        width: var(--slds-g-sizing-6);
        height: var(--slds-g-sizing-6);
        background-color: var(--slds-g-color-red-40);
    }

    .SyncModePicker-lastSyncFailed-text {
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

// SyncModePicker: separator between replication area and detail area.
// min-width keeps the flyout wide enough on tablet; phone (<=479px) drops it so the line doesn't overflow the viewport.
.SyncModePicker-separator {
    width: 100%;
    min-width: 510px;
    height: var(--slds-g-sizing-border-1);
    min-height: var(--slds-g-sizing-border-1);
    background-color: var(--slds-g-color-border-1);
    flex-shrink: 0;
}
@media @phone {
    .SyncModePicker-separator {
        min-width: 0;
    }
}

// SyncModePicker: Figma spec for sync flyout buttons
.SyncModePicker-buttonWrapper {
    width: 300px;
    button {
        width: 100%;
        box-sizing: border-box;
    }
}