.sync-feedback {
    display: flex;
    align-items: center;

    &.mod-error {
        color: var(--critical-70);

        .sync-feedback-icon svg {
            fill: var(--critical-70);
        }
    }

    &.mod-success .sync-feedback-icon svg {
        fill: var(--success-60);
    }

    .sync-feedback-icon {
        margin-right: 3px;
        line-height: 0;
        vertical-align: middle;
    }

    .status-dot {
        display: inline-block;
        width: 13px;
        height: 13px;
        vertical-align: -2px;
        border-radius: 50%;

        &.syncing {
            background-color: var(--deprecated-dark-grey);
            animation: scaleout 1s infinite ease-in-out;
        }
    }
}