.autosave {
  position: relative;
}

.autosave-status {
  // Position the status over the explanation text
  position: absolute;
  top: 0;

  &.succeeded {
    color: var(--success-425-625);
  }

  &.failed {
    color: var(--warning-425-625);
  }
}

.autosave-retry {
  &:disabled {
    .autosave-retry-label {
      display: none;
    }
  }

  &:not(:disabled) {
    cursor: pointer;

    .autosave-retrying-label {
      display: none;
    }
  }
}

$autosave-status-fade-in-duration: 0.2s;
$autosave-status-fade-out-duration: 0.7s;

// By default (and in the idle state), display the explanation text and hide statuses.
.autosave-explanation {
  visibility: visible;
  opacity: 1;
  // Make the explanation fade-in slowly when the status is being removed
  transition-property: opacity;
  transition-duration: $autosave-status-fade-out-duration;
}

.autosave-status {
  visibility: hidden;
  opacity: 0;
  // Make the status fade-out slowly when being removed
  transition-property: opacity, visibility;
  transition-duration: $autosave-status-fade-out-duration;
}

// When one of the status messages should be displayed:
.autosave-state-succeeded,
.autosave-state-failed {
  // Hide the explanation
  .autosave-explanation {
    visibility: hidden;
    opacity: 0;
    // Make the explanation fade-out quickly
    transition-property: opacity, visibility;
    transition-duration: $autosave-status-fade-in-duration;
  }

  // Show the status message (succeeded or failed)
  .autosave-status.succeeded,
  .autosave-status.failed {
    opacity: 1;
    // Make the status message fade-in quickly
    transition-property: opacity;
    transition-duration: $autosave-status-fade-in-duration;
  }
}

// Show only the relevant status message (succeeded of failed)
.autosave-state-succeeded .autosave-status.succeeded {
  visibility: visible;
}

.autosave-state-failed .autosave-status.failed {
  visibility: visible;
}