
.toolroll-app.toolroll-slug-generator { width: 100%; box-sizing: border-box; }
.toolroll-app.toolroll-slug-generator * { box-sizing: border-box; }
.toolroll-app.toolroll-slug-generator .toolroll-slug-generator__field { margin-bottom: 1rem; }
.toolroll-app.toolroll-slug-generator .toolroll-slug-generator__label { font-weight: 700; }
.toolroll-app.toolroll-slug-generator .toolroll-slug-generator__textarea { width: 100%; margin-top: .4rem; padding: .75rem; border: 1px solid #767676; border-radius: .35rem; font: inherit; resize: vertical; }
.toolroll-app.toolroll-slug-generator .toolroll-slug-generator__output { background: #f7f7f7; }
.toolroll-app.toolroll-slug-generator .toolroll-slug-generator__help { margin: .4rem 0 0; color: #4a4a4a; font-size: .95em; }
.toolroll-app.toolroll-slug-generator .toolroll-slug-generator__actions,
.toolroll-app.toolroll-slug-generator .toolroll-slug-generator__copy { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1rem 0; }
.toolroll-app.toolroll-slug-generator .toolroll-slug-generator__button { min-height: 2.75rem; padding: .65rem 1.1rem; border: 1px solid #225ea8; border-radius: .35rem; background: #fff; color: #174a84; font: inherit; font-weight: 700; cursor: pointer; }
.toolroll-app.toolroll-slug-generator .toolroll-slug-generator__button--primary { background: #225ea8; color: #fff; }
.toolroll-app.toolroll-slug-generator .toolroll-slug-generator__button:disabled { cursor: not-allowed; opacity: .55; }
.toolroll-app.toolroll-slug-generator .toolroll-slug-generator__button:focus-visible,
.toolroll-app.toolroll-slug-generator .toolroll-slug-generator__textarea:focus-visible { outline: 3px solid #ffbf47; outline-offset: 2px; }
.toolroll-app.toolroll-slug-generator .toolroll-slug-generator__status { min-height: 1.5em; padding: .7rem; border-left: 4px solid #767676; background: #f5f5f5; }
.toolroll-app.toolroll-slug-generator .toolroll-slug-generator__status[data-state="success"] { border-color: #2e7d32; }
.toolroll-app.toolroll-slug-generator .toolroll-slug-generator__status[data-state="error"] { border-color: #c62828; }
@media (max-width: 600px) {
  .toolroll-app.toolroll-slug-generator .toolroll-slug-generator__actions .toolroll-slug-generator__button,
  .toolroll-app.toolroll-slug-generator .toolroll-slug-generator__copy .toolroll-slug-generator__button { width: 100%; }
}
