.generateImg-content {
  padding: 1rem;
}

.filter-ai-form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-top: 20px;
}

.filter-ai-textarea {
  width: 600px;
  height: 100px;
}

.filter-ai-generate-button {
  margin-top: 5px;
}

.filter-ai-import-button {
  margin-top: 15px;
}

.filter-ai-error {
  color: red;
  background-color: #ffecec;
  border: 1px solid #f5c2c2;
  padding: 10px;
  border-radius: 4px;
  margin-top: 10px;
  max-width: 600px;
}

.filter-ai-image-grid {
  display: flex;
  justify-content: start;
  width: 65%;
}

.filter-ai-image-wrapper {
  background: none;
  border: none;
  display: block;
  cursor: pointer;
  border-radius: 4px;
  padding: 0;
}

.filter-ai-image-wrapper.components-button:focus {
  outline: none;
  box-shadow: none;
}

.filter-ai-image-wrapper:hover {
  border-color: #bbb;
}

.filter-ai-image-wrapper.selected {
  border: 4px solid #2271b1;
}

.filter-ai-image-wrapper:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.filter-ai-image {
  width: 100%;
  display: block;
}

.filter-ai-button-container {
  display: inline-block;
  margin-left: 8px;
  position: relative;
  top: -3px;

  & button {
    margin-left: 0;
    height: auto;
  }
}

.filter-ai-media-lib-generate-btn {
  height: 30px;
  border-radius: 3px;
  border-color: #0a4b78;
  background: #f0f0f1;
  color: #0a4b78;
}

.filter-ai-media-lib-generate-btn.page-title-action {
  top: 0 !important;
}

.filter-ai-generator-modal {
  padding-bottom: 15px;
  overflow-y: auto;
}

.filter-ai-generator-modal .filter-ai-textarea {
  width: 100%;
  max-width: 850px;
}

.filter-ai-generator-modal .filter-ai-image-grid {
  width: 100%;
  max-width: 900px;
}

.filter-ai-generator-modal .components-button.filter-ai-generate-button.is-secondary {
  margin-top: 13px;
}

.components-modal__frame.filter-ai-generator-modal {
  width: 100%;
  max-width: 46.875rem;
}