/* ==========================================================================
   Spacious Child Classic
   Components styles
   ========================================================================== */

/* --------------------------------------------------------------------------
 * Buttons
 * -------------------------------------------------------------------------- */

.scc-btn,
#main .scc-btn {
  display: inline-block;
  border: 1px solid transparent;
  border-radius: 20px;
  font-size: var(--scc-font-size-base);
  font-weight: var(--scc-font-weight-normal);
  line-height: var(--scc-line-height-sm);
  color: var(--scc-color-light);
  text-align: center;
  text-decoration: none;
  background-color: var(--scc-color-primary);
  padding: 6px 20px;
  cursor: pointer;
}

.scc-btn:hover,
.scc-btn:focus-visible,
#main .scc-btn:hover {
  color: var(--scc-color-light);
  background-color: var(--scc-color-primary-dark);
  text-decoration: none;
}

.scc-btn_sm,
#main .scc-btn_sm {
  font-size: 14px;
}

.scc-btn_lg,
#main .scc-btn_lg {
  border-radius: 40px;
  padding: 15px 40px;
}

.scc-btn-outline-primary {
  color: var(--scc-color-primary);
  border-color: var(--scc-color-primary);
}

.scc-btn-outline-primary:hover {
  color: var(--scc-color-light);
  background-color: var(--scc-color-primary);
  border-color: var(--scc-color-primary);
}

.scc-progress-bar {
  background-color: var(--scc-color-primary);
}