/* ==================================================================
   JUSTPIXEL SOFTWARE LIBRARY
   CASE CONVERTER
   ================================================================== */

.jp-case-converter {
  display: grid;

  gap: var(--jp-space-5);
}

/* ==================================================================
   EDITOR
   ================================================================== */

.jp-case-converter-editor {
  padding: var(--jp-space-6);

  border: 1px solid var(--jp-border);
  border-radius: var(--jp-radius-md);

  background: var(--jp-surface);

  box-shadow: var(--jp-shadow-sm);
}

/* ==================================================================
   TEXT AREA
   ================================================================== */

.jp-case-converter-input {
  min-height: 220px;

  height: clamp(220px, 30vh, 300px);

  resize: vertical;

  line-height: var(--jp-leading-relaxed);
}

/* ==================================================================
   ACTIONS
   ================================================================== */

.jp-case-converter-actions {
  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: var(--jp-space-3);
}

/* ==================================================================
   FOOTER
   ================================================================== */

.jp-case-converter-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: var(--jp-space-4);
}

.jp-case-converter-status {
  color: var(--jp-text-muted);

  font-size: var(--jp-text-sm);
}

/* ==================================================================
   TABLET
   ================================================================== */

@media (max-width: 800px) {
  .jp-case-converter-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ==================================================================
   MOBILE
   ================================================================== */

@media (max-width: 550px) {
  .jp-case-converter-input {
    min-height: 220px;

    height: 240px;
  }

  .jp-case-converter-actions {
    grid-template-columns: 1fr;
  }

  .jp-case-converter-footer {
    align-items: stretch;

    flex-direction: column;
  }

  .jp-case-converter-footer .jp-tool-button {
    width: 100%;
  }
}