// Sync info styles
// --------------------------------------------------

@import '~cartoassets/src/scss/cdb-variables/colors';

.SyncInfo--separator {
  position: relative;
  margin-top: -5px;
  margin-bottom: 12px;
  padding-bottom: 12px;

  &::after {
    content: '';
    position: absolute;
    right: -24px;
    bottom: 0;
    left: -24px;
    height: 1px;
    background: rgba(#000, 0.08);
  }
}

.is-dark .SyncInfo--separator::after {
  background: rgba(#FFF, 0.08);
}

.SyncInfo-viewOptions {
  color: $cBlue;
}

.is-dark .SyncInfo-viewOptions {
  color: $cWhite;
}

.SyncInfo-message--success {
  color: #5FCC79;
}

.SyncInfo-message--failure {
  color: $cError;
}

.SyncInfo-message--syncing {
  color: #898989;
}

.SyncInfo-state {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background: $cWhite;
}

.SyncInfo-state--small {
  width: 8px;
  height: 8px;
}

.SyncInfo-state--success {
  background: $cHighlight;
  color: $cHighlight;
}

.SyncInfo-state--failure {
  background: $cError;
  color: $cError;
}

.SyncInfo-state--syncing {
  background: #898989;
  color: #898989;
}