.syncContainer {
    position: relative;
    width: 100%;
    top: -18px;
    margin-bottom: -18px;
}

.progressBar {
    width: 100%;
    height: 1px;
    background-color: var(--background);
}

.progressValue {
    height: 100%;
    background-color: var(--color-blue);
    transition: width 1s ease;
    will-change: width;
}

.syncMessage {
    height: 16px;
    width: 100%;
    max-width: var(--content-width);
    font-size: var(--size-small);
    color: var(--color-secondary);
    text-align: right;
    margin: 0 auto;
    margin-bottom: 1px;
    padding: 0 var(--spacing-large);
}

.syncText {
    display: inline-block;
    height: 100%;
    font-variant: tabular-nums;
}

.spinnerContainer {
    position: relative;
    display: inline-block;
}

.spinner {
    color: var(--color-blue);
}

.spinner:after {
    position: relative;
    top: 2px;
    animation: changeContent .8s linear infinite;
    display: block;
    content: "⠋";
    font-size: 14px;
    margin-left: 3px;
}

@keyframes changeContent {
    10% { content: "⠙"; }
    20% { content: "⠹"; }
    30% { content: "⠸"; }
    40% { content: "⠼"; }
    50% { content: "⠴"; }
    60% { content: "⠦"; }
    70% { content: "⠧"; }
    80% { content: "⠇"; }
    90% { content: "⠏"; }
}

@media (max-width: 900px) {
    .syncMessage {
        padding: 0 var(--spacing-default);
    }
}

@media (max-width: 640px) {
    .syncMessage {
        padding: 0 var(--spacing-half);
    }
}
