/**
 * @file
 * Styles for the FlowDrop Vanilla Icon Picker integration.
 *
 * Provides styling for the icon picker wrapper with preview,
 * matching the Bootstrap input-group style from the Vanilla Icon
 * Picker demo, adapted for Drupal admin themes (Claro, Gin).
 *
 * @see https://github.com/AppoloDev/vanilla-icon-picker
 * @see https://appolodev.github.io/vanilla-icon-picker/
 */

/* ==========================================================================
   Icon Picker Wrapper (Input Group)
   ========================================================================== */

/**
 * Input group wrapper containing the preview and text field.
 * Provides flexbox layout with the icon preview on the left.
 */
.flowdrop-icon-picker-wrapper {
  display: inline-flex;
  align-items: stretch;
  max-width: 350px;
}

/**
 * Ensure the text field fills available space.
 */
.flowdrop-icon-picker-wrapper .form-control,
.flowdrop-icon-picker-wrapper .flowdrop-icon-field {
  flex: 1 1 auto;
  min-width: 0;
}

/* ==========================================================================
   Icon Preview
   ========================================================================== */

/**
 * Icon preview container styled like Bootstrap's input-group-text.
 * Shows the selected icon on the left side of the input.
 */
.flowdrop-icon-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  padding: 0.375rem 0.75rem;
  color: #495057;
  border: 1px solid #8e929c;
  border-right: 0;
  border-radius: 2px 0 0 2px;
  background-color: #f5f5f5;
  font-size: 1.25rem;
  line-height: 1;
}

/**
 * The icon element inside the preview.
 */
.flowdrop-icon-preview__icon {
  font-size: 1.25rem;
  line-height: 1;
}

/* ==========================================================================
   Claro Theme Integration
   ========================================================================== */

/**
 * Claro theme uses specific form element styling.
 */
.claro-details__wrapper .flowdrop-icon-picker-wrapper,
.form-item .flowdrop-icon-picker-wrapper {
  max-width: 350px;
}

/**
 * Match Claro input styling for the text field.
 */
.claro-details__wrapper .flowdrop-icon-picker-wrapper .form-text,
.form-item .flowdrop-icon-picker-wrapper .form-text {
  margin: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/**
 * Claro theme preview styling.
 */
.claro-details__wrapper .flowdrop-icon-preview,
.form-item .flowdrop-icon-preview {
  color: #55565b;
  border-color: #8e929c;
  background-color: #f3f4f9;
}

/* ==========================================================================
   Gin Theme Integration
   ========================================================================== */

/**
 * Gin theme uses rounded corners and different colors.
 */
.gin--dark-mode .flowdrop-icon-preview {
  color: #e8eaed;
  border-color: #5f6368;
  background-color: #2a2b2d;
}

/**
 * Gin theme text field adjustments.
 */
.gin .flowdrop-icon-picker-wrapper .form-text,
.gin--dark-mode .flowdrop-icon-picker-wrapper .form-text {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* ==========================================================================
   Vanilla Icon Picker Modal
   ========================================================================== */

/**
 * Ensure picker modal appears above Drupal admin elements.
 */
.vanilla-ip {
  z-index: 500;
}

.vanilla-ip .vanilla-ip-modal,
.icon-picker-modal {
  z-index: 10000;
}

/**
 * Gin dark mode adjustments for the picker modal.
 */
.gin--dark-mode .icon-picker-modal {
  border-color: #5f6368;
  background-color: #2a2b2d;
}

.gin--dark-mode .icon-picker-modal__header,
.gin--dark-mode .icon-picker-modal__footer {
  background-color: #323334;
}

.gin--dark-mode .icon-picker-modal button {
  color: #e8eaed;
  background-color: #4a4b4d;
}

.gin--dark-mode .icon-picker-modal button:hover {
  background-color: #5a5b5d;
}
