/* ==================================================================
   JUSTPIXEL SOFTWARE LIBRARY
   COLOUR CONVERTER
   ================================================================== */

.jp-colour-converter {
  display: grid;

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

/* ==================================================================
   INPUT PANEL
   ================================================================== */

.jp-colour-input-panel,
.jp-colour-preview-panel,
.jp-colour-values-panel {
  padding: var(--jp-space-5);

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

.jp-colour-input-row {
  display: grid;

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

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

.jp-colour-input {
  font-family: var(--jp-font-mono);
}

/* ==================================================================
   EXAMPLES
   ================================================================== */

.jp-colour-examples {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: var(--jp-space-2);

  margin-top: var(--jp-space-3);

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

.jp-colour-example {
  padding: 0;

  border: 0;

  background: transparent;

  color: var(--jp-primary);

  font: inherit;
  font-family: var(--jp-font-mono);
  font-size: var(--jp-text-sm);
  font-weight: var(--jp-weight-medium);

  cursor: pointer;
}

.jp-colour-example:hover {
  color: var(--jp-primary-hover);

  text-decoration: underline;
}

.jp-colour-example:focus-visible {
  outline: none;

  box-shadow: var(--jp-focus-ring);

  border-radius: var(--jp-radius-xs);
}

/* ==================================================================
   RESULT LAYOUT
   ================================================================== */

.jp-colour-result-layout {
  display: grid;

  grid-template-columns:
    minmax(240px, 0.7fr)
    minmax(0, 1.3fr);

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

/* ==================================================================
   PREVIEW
   ================================================================== */

.jp-colour-preview-panel {
  display: flex;
  flex-direction: column;
}

.jp-colour-preview {
  flex: 1;

  min-height: clamp(220px, 30vh, 320px);

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

  background: var(--jp-primary);

  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--jp-text) 5%, transparent);
}

/* ==================================================================
   VALUES
   ================================================================== */

.jp-colour-values {
  display: grid;

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

.jp-colour-value-row {
  display: flex;
  align-items: center;
  justify-content: space-between;

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

  padding: var(--jp-space-4);

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

  background: var(--jp-surface-soft);
}

.jp-colour-value-content {
  display: flex;
  flex-direction: column;

  min-width: 0;

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

.jp-colour-value-label {
  color: var(--jp-text-muted);

  font-size: var(--jp-text-xs);
  font-weight: var(--jp-weight-bold);

  text-transform: uppercase;

  letter-spacing: 0.08em;
}

.jp-colour-value {
  overflow-wrap: anywhere;

  color: var(--jp-text);

  font-family: var(--jp-font-mono);
  font-size: var(--jp-text-base);
}

/* ==================================================================
   STATUS
   ================================================================== */

.jp-colour-status {
  margin-top: var(--jp-space-4);
}

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

@media (max-width: 900px) {
  .jp-colour-result-layout {
    grid-template-columns: 1fr;
  }

  .jp-colour-preview {
    min-height: 200px;
  }
}

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

@media (max-width: 550px) {
  .jp-colour-input-row {
    grid-template-columns: 1fr;
  }

  .jp-colour-input-row .jp-tool-button {
    width: 100%;
  }

  .jp-colour-value-row {
    align-items: stretch;

    flex-direction: column;
  }

  .jp-colour-copy-button {
    width: 100%;
  }

  .jp-colour-preview {
    min-height: 180px;
  }
}