.cpap-mask-backup-inline,
.cpap-mask-backup-inline * {
    box-sizing: border-box;
}

.cpap-mask-backup-inline {
    display: block;
    margin-top: 9px;
}

.cpap-mask-backup-inline__button {
    display: inline-flex;
    min-height: 38px;
    max-width: 100%;
    align-items: center;
    gap: 9px;
    padding: 8px 14px;
    border: 0;
    border-radius: 8px;
    background: #8cc63f !important;
    box-shadow: 0 2px 8px rgb(66 102 20 / 16%) !important;
    color: #111 !important;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
    text-align: left;
    text-transform: none;
    transform: translateY(0);
    transition: background-color 160ms ease, box-shadow 160ms ease, opacity 160ms ease, transform 160ms ease;
}

.cpap-mask-backup-inline__button:hover,
.cpap-mask-backup-inline__button:focus-visible {
    background: #79b331 !important;
    box-shadow: 0 5px 14px rgb(66 102 20 / 22%) !important;
    transform: translateY(-1px);
}

.cpap-mask-backup-inline__button:focus-visible {
    outline: 3px solid #151515;
    outline-offset: 2px;
}

.cpap-mask-backup-inline__button.is-loading,
.cpap-mask-backup-inline__button.is-success {
    cursor: wait;
    transform: none;
}

.cpap-mask-backup-inline__button.is-loading::before {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    border: 2px solid rgb(17 17 17 / 24%);
    border-top-color: #111;
    border-radius: 50%;
    content: '';
    animation: cpap-mask-backup-spin 650ms linear infinite;
}

.cpap-mask-backup-inline__button.is-loading > span:first-child,
.cpap-mask-backup-inline__button.is-success > span:first-child {
    display: none;
}

.cpap-mask-backup-inline__button.is-success::before {
    content: '✓';
    font-size: 17px;
    line-height: 1;
}

.cpap-mask-backup-inline__status:empty {
    display: none;
}

.cpap-mask-backup-inline.has-error .cpap-mask-backup-inline__button {
    background: #fff4f2 !important;
    box-shadow: inset 0 0 0 1px #d92d20 !important;
    color: #b42318 !important;
    animation: cpap-mask-backup-shake 240ms ease;
}

.cpap-mask-backup-item-adding {
    opacity: .72;
    transition: opacity 180ms ease;
}

.cpap-mask-backup-item-added {
    animation: cpap-mask-backup-confirm 420ms ease both;
}

@keyframes cpap-mask-backup-spin {
    to { transform: rotate(360deg); }
}

@keyframes cpap-mask-backup-shake {
    25% { transform: translateX(-2px); }
    75% { transform: translateX(2px); }
}

@keyframes cpap-mask-backup-confirm {
    50% { background-color: rgb(140 198 63 / 13%); }
}

@media (max-width: 690px) {
    .cpap-mask-backup-inline__button {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cpap-mask-backup-inline__button,
    .cpap-mask-backup-item-adding {
        transition: none;
    }

    .cpap-mask-backup-inline__button.is-loading::before,
    .cpap-mask-backup-inline.has-error .cpap-mask-backup-inline__button,
    .cpap-mask-backup-item-added {
        animation: none;
    }
}