/* The outbound connections tab: what this practice reaches out to.
   Sized to match the other two credential pages, which share service_accounts.css. */

.outbound-connections--empty {
  max-width: 44rem;
}

.outbound-connections--form {
  max-width: 34rem;
  margin-top: 1.5rem;

  label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: var(--rem-13);
    color: var(--neutral-600);
  }

  input[type="url"] {
    margin-bottom: 1.5rem;
  }
}

/* Two buttons in a table cell, which `button_to` would otherwise stack as two forms. */
.outbound-connections--row-actions {
  display: flex;
  flex-direction: row;
  gap: 0.75rem;
  justify-content: flex-end;
}

/* The last failure stays on the page rather than passing by in a flash: whoever wonders
   why the connection stopped is usually not whoever was there when it did. */
.outbound-connections--last-error {
  max-width: 44rem;
  margin-top: 1.5rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-lg);
  background-color: var(--danger-100, var(--neutral-100));
  color: var(--neutral-900);
  font-size: var(--rem-13);
}

.outbound-connections--note {
  max-width: 44rem;
  margin-top: 1.5rem;
  color: var(--neutral-600);
  font-size: var(--rem-13);
}

@media (max-width: 40rem) {
  .outbound-connections--row-actions {
    flex-direction: column;
    align-items: stretch;
  }
}