/* ==================================================================
   JUSTPIXEL SOFTWARE LIBRARY
   COLOUR PALETTE GENERATOR
   ================================================================== */

.jp-colour-palette-tool {
  display: grid;

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

/* ==================================================================
   ACTION PANEL
   ================================================================== */

.jp-colour-palette-actions-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;

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

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

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

.jp-colour-palette-actions {
  display: flex;
  flex-wrap: wrap;

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

.jp-colour-palette-hint {
  margin: 0;

  color: var(--jp-text-muted);

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

/* ==================================================================
   PALETTE GRID
   ================================================================== */

.jp-colour-palette-grid {
  display: grid;

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

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

/* ==================================================================
   PALETTE CARD
   ================================================================== */

.jp-colour-palette-card {
  min-width: 0;

  overflow: hidden;

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

  background: var(--jp-surface);

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

  transition:
    border-color var(--jp-transition-fast),
    box-shadow var(--jp-transition-fast),
    transform var(--jp-transition-fast);
}

.jp-colour-palette-card:hover {
  transform: translateY(-2px);

  border-color: var(--jp-border-strong);

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

.jp-colour-palette-card.is-locked {
  border-color: var(--jp-primary);
}

/* ==================================================================
   SWATCH
   ================================================================== */

.jp-colour-palette-swatch {
  min-height: clamp(200px, 34vh, 360px);

  border-bottom: 1px solid var(--jp-border);

  transition: background-color var(--jp-transition);
}

/* ==================================================================
   CARD CONTENT
   ================================================================== */

.jp-colour-palette-card-content {
  display: grid;

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

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

.jp-colour-palette-value {
  display: block;

  overflow-wrap: anywhere;

  color: var(--jp-text);

  text-align: center;

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

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

.jp-colour-palette-card-actions {
  display: grid;

  grid-template-columns: 1fr 1fr;

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

.jp-colour-palette-card-actions .jp-tool-button {
  min-width: 0;

  padding-left: var(--jp-space-2);
  padding-right: var(--jp-space-2);

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

/* ==================================================================
   LOCKED STATE
   ================================================================== */

.jp-colour-palette-card.is-locked .jp-colour-palette-lock-button {
  border-color: var(--jp-primary);

  background: var(--jp-surface-accent);

  color: var(--jp-primary);
}

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

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

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

@media (max-width: 1000px) {
  .jp-colour-palette-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .jp-colour-palette-swatch {
    min-height: 220px;
  }
}

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

@media (max-width: 700px) {
  .jp-colour-palette-actions-panel {
    align-items: flex-start;

    flex-direction: column;
  }

  .jp-colour-palette-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .jp-colour-palette-swatch {
    min-height: 190px;
  }
}

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

@media (max-width: 500px) {
  .jp-colour-palette-actions {
    display: grid;

    grid-template-columns: 1fr;

    width: 100%;
  }

  .jp-colour-palette-actions .jp-tool-button {
    width: 100%;
  }

  .jp-colour-palette-grid {
    grid-template-columns: 1fr;
  }

  .jp-colour-palette-card {
    display: grid;

    grid-template-columns:
      minmax(110px, 0.8fr)
      minmax(0, 1.2fr);
  }

  .jp-colour-palette-swatch {
    min-height: 160px;

    border-right: 1px solid var(--jp-border);
    border-bottom: 0;
  }

  .jp-colour-palette-card-content {
    align-content: center;
  }
}