/* =========================================================
   FORM ELEMENTS
========================================================= */

.scq-input,
.scq-select {

  width: 100%;

  min-height: 44px;

  padding:
    0 13px;

  color:
    var(--text);

  background:
    var(--surface-raised);

  border:
    1px solid
    var(--border);

  border-radius:
    var(--radius-sm);

  outline: 0;

  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);

}


.scq-input:focus,
.scq-select:focus {

  border-color:
    var(--primary);

  box-shadow:
    0 0 0 3px
    var(--glow-primary);

}


/* =========================================================
   TEXTAREA
========================================================= */

.scq-textarea {
  width: 100%;

  resize: vertical;

  min-height: 150px;

  padding:
    13px 14px;

  color:
    var(--text);

  background:
    var(--surface-raised);

  border:
    1px solid
    var(--border);

  border-radius:
    var(--radius-sm);

  outline: none;

  font-family:
    var(--font-body);

  font-size: 14px;

  line-height: 1.65;

  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}


.scq-textarea:focus {
  border-color:
    var(--primary);

  box-shadow:
    0 0 0 3px
    var(--glow-primary);
}


.scq-textarea::placeholder {
  color:
    var(--text-faint);
}