/**
 * @file
 * FlowDrop Toolbar Styles.
 *
 * Provides styling for the FlowDrop toolbar icons and tray.
 * Compatible with both Claro and Gin admin themes.
 */

/**
 * FlowDrop Icon SVG Definitions.
 *
 * SVG icons for FlowDrop toolbar menu items.
 * Two versions of the main icon:
 * - flowdrop-icon-main: Colored version for background-image (Claro theme)
 * - flowdrop-icon-main-mask: Solid filled silhouette for mask-image (Gin theme)
 */
:root {
  /**
   * Main FlowDrop icon - Colored version with strokes.
   *
   * Used for background-image approach where colors are displayed directly.
   */
  --flowdrop-icon-main: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='11.625' y='7.34' width='0.75' height='7.25' fill='%23000'/%3E%3Cpath d='M12 7v2.46c0 0-.08 2.51 2.29 4.15 1.88 1.3 3.33 1.04 3.54 4.15l.03.33' fill='none' stroke='%23000' stroke-width='0.75'/%3E%3Cpath d='M12 7v2.53c0 0 .08 2.51-2.29 4.15-1.88 1.3-3.33 1.04-3.54 4.15l-.03.33' fill='none' stroke='%23000' stroke-width='0.75'/%3E%3Cpath d='M12 1.81l1.61 1.97c.4.4.64.96.64 1.57 0 1.24-1.01 2.24-2.25 2.24s-2.25-1-2.25-2.24c0-.6.24-1.15.63-1.55z' fill='%23009cde' stroke='%23000' stroke-width='0.5'/%3E%3Ccircle cx='12' cy='17.21' r='2.25' fill='%23f46351' stroke='%23000' stroke-width='0.5'/%3E%3Ccircle cx='6.2' cy='20.21' r='2.25' fill='%23ccbaf4' stroke='%23000' stroke-width='0.5'/%3E%3Ccircle cx='17.87' cy='20.31' r='2.25' fill='%23ffc423' stroke='%23000' stroke-width='0.5'/%3E%3C/svg%3E");

  /**
   * Main FlowDrop icon - Solid filled silhouette version.
   *
   * Used for mask-image approach where the shape acts as a mask
   * and background-color provides the visible color.
   * All shapes are filled solid black for proper masking.
   */
  --flowdrop-icon-main-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Crect x='11.25' y='6.5' width='1.5' height='8.5'/%3E%3Cpath d='M12 7v2.46c0 0-.08 2.51 2.29 4.15 1.88 1.3 3.33 1.04 3.54 4.15l.03.33' stroke='%23000' stroke-width='1.5' fill='none'/%3E%3Cpath d='M12 7v2.53c0 0 .08 2.51-2.29 4.15-1.88 1.3-3.33 1.04-3.54 4.15l-.03.33' stroke='%23000' stroke-width='1.5' fill='none'/%3E%3Cpath d='M12 1.81l1.61 1.97c.4.4.64.96.64 1.57 0 1.24-1.01 2.24-2.25 2.24s-2.25-1-2.25-2.24c0-.6.24-1.15.63-1.55z' fill='%23000'/%3E%3Ccircle cx='12' cy='17.21' r='2.5' fill='%23000'/%3E%3Ccircle cx='6.2' cy='20.21' r='2.5' fill='%23000'/%3E%3Ccircle cx='17.87' cy='20.31' r='2.5' fill='%23000'/%3E%3C/svg%3E");

  /* Node Types icon - Grid/modules */
  --flowdrop-icon-node-types: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23000000"><path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/></svg>');

  /* Node Categories icon - Tag/label */
  --flowdrop-icon-categories: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23000000"><path d="M21.41 11.58l-9-9C12.05 2.22 11.55 2 11 2H4c-1.1 0-2 .9-2 2v7c0 .55.22 1.05.59 1.42l9 9c.36.36.86.58 1.41.58.55 0 1.05-.22 1.41-.59l7-7c.37-.36.59-.86.59-1.41 0-.55-.23-1.06-.59-1.42zM5.5 7C4.67 7 4 6.33 4 5.5S4.67 4 5.5 4 7 4.67 7 5.5 6.33 7 5.5 7z"/></svg>');

  /* Triggers icon - Lightning bolt */
  --flowdrop-icon-triggers: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23000000"><path d="M7 2v11h3v9l7-12h-4l4-8z"/></svg>');

  /* Jobs icon - Task/clipboard */
  --flowdrop-icon-jobs: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23000000"><path d="M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm2 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/></svg>');

  /* Job Types icon - Layers/stack */
  --flowdrop-icon-job-types: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23000000"><path d="M11.99 18.54l-7.37-5.73L3 14.07l9 7 9-7-1.63-1.27-7.38 5.74zM12 16l7.36-5.73L21 9l-9-7-9 7 1.63 1.27L12 16z"/></svg>');
}

/* ==========================================================================
 * CLARO THEME - Default background-image approach
 * ========================================================================== */

/**
 * FlowDrop main icons - Claro Theme.
 */
.toolbar-icon-flowdrop::before,
.toolbar-icon-flowdrop-dashboard::before {
  background-image: var(--flowdrop-icon-main);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 16px 16px;
}

.toolbar-icon-entity-flowdrop-node-type-overview::before {
  background-image: var(--flowdrop-icon-node-types);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 16px 16px;
}

.toolbar-icon-entity-flowdrop-node-category-overview::before {
  background-image: var(--flowdrop-icon-categories);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 16px 16px;
}

.toolbar-icon-entity-flowdrop-trigger-config-collection::before {
  background-image: var(--flowdrop-icon-triggers);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 16px 16px;
}

.toolbar-icon-entity-flowdrop-job-collection::before {
  background-image: var(--flowdrop-icon-jobs);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 16px 16px;
}

.toolbar-icon-entity-flowdrop-job-type-collection::before {
  background-image: var(--flowdrop-icon-job-types);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 16px 16px;
}

/* ==========================================================================
 * NAVIGATION MODULE - New Drupal toolbar (toolbar-link-- pattern)
 * ========================================================================== */

/**
 * Navigation module + Gin use --icon on ::before pseudo-element.
 *
 * Follows Gin's pattern: .toolbar-icon-*::before,
 * .toolbar-link--*::before, .toolbar-button--icon--*::before
 */
.toolbar-link--flowdrop-dashboard::before,
.toolbar-button--icon--flowdrop-dashboard::before {
  --icon: var(--flowdrop-icon-main-mask);
}

.toolbar-link--entity-flowdrop-node-type-overview::before,
.toolbar-button--icon--entity-flowdrop-node-type-overview::before {
  --icon: var(--flowdrop-icon-node-types);
}

.toolbar-link--entity-flowdrop-node-category-overview::before,
.toolbar-button--icon--entity-flowdrop-node-category-overview::before {
  --icon: var(--flowdrop-icon-categories);
}

.toolbar-link--entity-flowdrop-trigger-config-collection::before,
.toolbar-button--icon--entity-flowdrop-trigger-config-collection::before {
  --icon: var(--flowdrop-icon-triggers);
}

.toolbar-link--entity-flowdrop-job-collection::before,
.toolbar-button--icon--entity-flowdrop-job-collection::before {
  --icon: var(--flowdrop-icon-jobs);
}

.toolbar-link--entity-flowdrop-job-type-collection::before,
.toolbar-button--icon--entity-flowdrop-job-type-collection::before {
  --icon: var(--flowdrop-icon-job-types);
}

/* ==========================================================================
 * GIN THEME - mask-image approach with --icon variable
 * ========================================================================== */

/**
 * Set the --icon CSS variable that Gin uses for mask-image.
 *
 * Uses the solid mask version for proper rendering with mask-image technique.
 */
.toolbar .toolbar-bar .toolbar-icon-flowdrop,
.toolbar .toolbar-bar .toolbar-icon-flowdrop-dashboard {
  --icon: var(--flowdrop-icon-main-mask);
}

.toolbar .toolbar-bar .toolbar-icon-entity-flowdrop-node-type-overview {
  --icon: var(--flowdrop-icon-node-types);
}

.toolbar .toolbar-bar .toolbar-icon-entity-flowdrop-node-category-overview {
  --icon: var(--flowdrop-icon-categories);
}

.toolbar .toolbar-bar .toolbar-icon-entity-flowdrop-trigger-config-collection {
  --icon: var(--flowdrop-icon-triggers);
}

.toolbar .toolbar-bar .toolbar-icon-entity-flowdrop-job-collection {
  --icon: var(--flowdrop-icon-jobs);
}

.toolbar .toolbar-bar .toolbar-icon-entity-flowdrop-job-type-collection {
  --icon: var(--flowdrop-icon-job-types);
}

/**
 * High specificity selectors for Gin theme icon rendering.
 *
 * Gin uses mask-image to render icons with dynamic colors.
 * Uses the solid mask version (--flowdrop-icon-main-mask) for proper rendering.
 */
.toolbar .toolbar-bar .toolbar-icon-flowdrop::before,
.toolbar .toolbar-bar .toolbar-icon-flowdrop-dashboard::before {
  background-color: var(--gin-icon-color, rgb(255, 255, 255, 0.75));
  background-image: none;
  -webkit-mask-image: var(--flowdrop-icon-main-mask);
  mask-image: var(--flowdrop-icon-main-mask);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: var(--gin-icon-size-toolbar, 20px) var(--gin-icon-size-toolbar, 20px);
  mask-size: var(--gin-icon-size-toolbar, 20px) var(--gin-icon-size-toolbar, 20px);
}

.toolbar .toolbar-bar .toolbar-icon-entity-flowdrop-node-type-overview::before {
  background-color: var(--gin-icon-color, rgb(255, 255, 255, 0.75));
  background-image: none;
  -webkit-mask-image: var(--flowdrop-icon-node-types);
  mask-image: var(--flowdrop-icon-node-types);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: var(--gin-icon-size-toolbar, 20px) var(--gin-icon-size-toolbar, 20px);
  mask-size: var(--gin-icon-size-toolbar, 20px) var(--gin-icon-size-toolbar, 20px);
}

.toolbar .toolbar-bar .toolbar-icon-entity-flowdrop-node-category-overview::before {
  background-color: var(--gin-icon-color, rgb(255, 255, 255, 0.75));
  background-image: none;
  -webkit-mask-image: var(--flowdrop-icon-categories);
  mask-image: var(--flowdrop-icon-categories);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: var(--gin-icon-size-toolbar, 20px) var(--gin-icon-size-toolbar, 20px);
  mask-size: var(--gin-icon-size-toolbar, 20px) var(--gin-icon-size-toolbar, 20px);
}

.toolbar .toolbar-bar .toolbar-icon-entity-flowdrop-trigger-config-collection::before {
  background-color: var(--gin-icon-color, rgb(255, 255, 255, 0.75));
  background-image: none;
  -webkit-mask-image: var(--flowdrop-icon-triggers);
  mask-image: var(--flowdrop-icon-triggers);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: var(--gin-icon-size-toolbar, 20px) var(--gin-icon-size-toolbar, 20px);
  mask-size: var(--gin-icon-size-toolbar, 20px) var(--gin-icon-size-toolbar, 20px);
}

.toolbar .toolbar-bar .toolbar-icon-entity-flowdrop-job-collection::before {
  background-color: var(--gin-icon-color, rgb(255, 255, 255, 0.75));
  background-image: none;
  -webkit-mask-image: var(--flowdrop-icon-jobs);
  mask-image: var(--flowdrop-icon-jobs);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: var(--gin-icon-size-toolbar, 20px) var(--gin-icon-size-toolbar, 20px);
  mask-size: var(--gin-icon-size-toolbar, 20px) var(--gin-icon-size-toolbar, 20px);
}

.toolbar .toolbar-bar .toolbar-icon-entity-flowdrop-job-type-collection::before {
  background-color: var(--gin-icon-color, rgb(255, 255, 255, 0.75));
  background-image: none;
  -webkit-mask-image: var(--flowdrop-icon-job-types);
  mask-image: var(--flowdrop-icon-job-types);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: var(--gin-icon-size-toolbar, 20px) var(--gin-icon-size-toolbar, 20px);
  mask-size: var(--gin-icon-size-toolbar, 20px) var(--gin-icon-size-toolbar, 20px);
}

/**
 * Gin hover/active states for all FlowDrop icons.
 */
.toolbar .toolbar-bar .toolbar-icon-flowdrop:hover::before,
.toolbar .toolbar-bar .toolbar-icon-flowdrop-dashboard:hover::before,
.toolbar .toolbar-bar .toolbar-icon-entity-flowdrop-node-type-overview:hover::before,
.toolbar .toolbar-bar .toolbar-icon-entity-flowdrop-node-category-overview:hover::before,
.toolbar .toolbar-bar .toolbar-icon-entity-flowdrop-trigger-config-collection:hover::before,
.toolbar .toolbar-bar .toolbar-icon-entity-flowdrop-job-collection:hover::before,
.toolbar .toolbar-bar .toolbar-icon-entity-flowdrop-job-type-collection:hover::before {
  background-color: var(--gin-color-primary, #003cc5);
}

.toolbar .toolbar-bar .toolbar-icon-flowdrop.is-active::before,
.toolbar .toolbar-bar .toolbar-icon-flowdrop-dashboard.is-active::before,
.toolbar .toolbar-bar .toolbar-icon-entity-flowdrop-node-type-overview.is-active::before,
.toolbar .toolbar-bar .toolbar-icon-entity-flowdrop-node-category-overview.is-active::before,
.toolbar .toolbar-bar .toolbar-icon-entity-flowdrop-trigger-config-collection.is-active::before,
.toolbar .toolbar-bar .toolbar-icon-entity-flowdrop-job-collection.is-active::before,
.toolbar .toolbar-bar .toolbar-icon-entity-flowdrop-job-type-collection.is-active::before {
  background-color: var(--gin-color-button-text, #fff);
}

/* ==========================================================================
 * TRAY STYLING
 * ========================================================================== */

/**
 * Tray styling - Works with both Claro and Gin themes.
 */
.toolbar-tray-flowdrop .toolbar-menu {
  padding: 0.5rem 0;
}

.toolbar-tray-flowdrop .toolbar-menu a {
  display: block;
  padding: 0.5rem 1rem;
  text-decoration: none;
  color: var(--gin-color-text, #333);
}

.toolbar-tray-flowdrop .toolbar-menu a:hover,
.toolbar-tray-flowdrop .toolbar-menu a:focus {
  color: var(--gin-color-primary-hover, #06c);
  background-color: var(--gin-bg-item-hover, #f5f5f5);
}

/**
 * Horizontal orientation.
 */
.toolbar-horizontal .toolbar-tray-flowdrop .toolbar-menu {
  display: flex;
  flex-wrap: wrap;
}

.toolbar-horizontal .toolbar-tray-flowdrop .toolbar-menu li {
  list-style: none;
}

/* ==========================================================================
 * GIN THEME - TRAY ICON STYLING
 * ========================================================================== */

/**
 * FlowDrop icons in the toolbar tray (expanded menu).
 *
 * The tray has a light background, so icons need a DARK background-color
 * when using mask-image technique. This ensures the icon is visible
 * against the light tray background.
 */
.toolbar .toolbar-tray .toolbar-icon-flowdrop::before,
.toolbar .toolbar-tray .toolbar-icon-flowdrop-dashboard::before {
  background-color: var(--gin-color-text, #333);
  background-image: none;
  -webkit-mask-image: var(--flowdrop-icon-main-mask);
  mask-image: var(--flowdrop-icon-main-mask);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: var(--gin-icon-size-toolbar, 20px) var(--gin-icon-size-toolbar, 20px);
  mask-size: var(--gin-icon-size-toolbar, 20px) var(--gin-icon-size-toolbar, 20px);
}

.toolbar .toolbar-tray .toolbar-icon-entity-flowdrop-node-type-overview::before {
  background-color: var(--gin-color-text, #333);
  background-image: none;
  -webkit-mask-image: var(--flowdrop-icon-node-types);
  mask-image: var(--flowdrop-icon-node-types);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: var(--gin-icon-size-toolbar, 20px) var(--gin-icon-size-toolbar, 20px);
  mask-size: var(--gin-icon-size-toolbar, 20px) var(--gin-icon-size-toolbar, 20px);
}

.toolbar .toolbar-tray .toolbar-icon-entity-flowdrop-node-category-overview::before {
  background-color: var(--gin-color-text, #333);
  background-image: none;
  -webkit-mask-image: var(--flowdrop-icon-categories);
  mask-image: var(--flowdrop-icon-categories);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: var(--gin-icon-size-toolbar, 20px) var(--gin-icon-size-toolbar, 20px);
  mask-size: var(--gin-icon-size-toolbar, 20px) var(--gin-icon-size-toolbar, 20px);
}

.toolbar .toolbar-tray .toolbar-icon-entity-flowdrop-trigger-config-collection::before {
  background-color: var(--gin-color-text, #333);
  background-image: none;
  -webkit-mask-image: var(--flowdrop-icon-triggers);
  mask-image: var(--flowdrop-icon-triggers);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: var(--gin-icon-size-toolbar, 20px) var(--gin-icon-size-toolbar, 20px);
  mask-size: var(--gin-icon-size-toolbar, 20px) var(--gin-icon-size-toolbar, 20px);
}

.toolbar .toolbar-tray .toolbar-icon-entity-flowdrop-job-collection::before {
  background-color: var(--gin-color-text, #333);
  background-image: none;
  -webkit-mask-image: var(--flowdrop-icon-jobs);
  mask-image: var(--flowdrop-icon-jobs);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: var(--gin-icon-size-toolbar, 20px) var(--gin-icon-size-toolbar, 20px);
  mask-size: var(--gin-icon-size-toolbar, 20px) var(--gin-icon-size-toolbar, 20px);
}

.toolbar .toolbar-tray .toolbar-icon-entity-flowdrop-job-type-collection::before {
  background-color: var(--gin-color-text, #333);
  background-image: none;
  -webkit-mask-image: var(--flowdrop-icon-job-types);
  mask-image: var(--flowdrop-icon-job-types);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: var(--gin-icon-size-toolbar, 20px) var(--gin-icon-size-toolbar, 20px);
  mask-size: var(--gin-icon-size-toolbar, 20px) var(--gin-icon-size-toolbar, 20px);
}

/**
 * Gin tray icon active state.
 *
 * The theme's active state uses white (for dark toolbar bar), but we need
 * a visible color for the light tray background. Use the same text color
 * as the default state to maintain consistency with other tray icons.
 */
.toolbar .toolbar-tray .toolbar-icon-flowdrop.is-active::before,
.toolbar .toolbar-tray .toolbar-icon-flowdrop-dashboard.is-active::before,
.toolbar .toolbar-tray .toolbar-icon-entity-flowdrop-node-type-overview.is-active::before,
.toolbar .toolbar-tray .toolbar-icon-entity-flowdrop-node-category-overview.is-active::before,
.toolbar .toolbar-tray .toolbar-icon-entity-flowdrop-trigger-config-collection.is-active::before,
.toolbar .toolbar-tray .toolbar-icon-entity-flowdrop-job-collection.is-active::before,
.toolbar .toolbar-tray .toolbar-icon-entity-flowdrop-job-type-collection.is-active::before {
  background-color: var(--gin-color-text, #333);
}

/* ==========================================================================
 * GIN DARK MODE
 * ========================================================================== */

/**
 * Gin Theme - Dark Mode Support.
 */
.gin--dark-mode .toolbar .toolbar-bar .toolbar-icon-flowdrop::before,
.gin--dark-mode .toolbar .toolbar-bar .toolbar-icon-flowdrop-dashboard::before,
.gin--dark-mode .toolbar .toolbar-bar .toolbar-icon-entity-flowdrop-node-type-overview::before,
.gin--dark-mode .toolbar .toolbar-bar .toolbar-icon-entity-flowdrop-node-category-overview::before,
.gin--dark-mode .toolbar .toolbar-bar .toolbar-icon-entity-flowdrop-trigger-config-collection::before,
.gin--dark-mode .toolbar .toolbar-bar .toolbar-icon-entity-flowdrop-job-collection::before,
.gin--dark-mode .toolbar .toolbar-bar .toolbar-icon-entity-flowdrop-job-type-collection::before {
  background-color: var(--gin-icon-color, rgb(255, 255, 255, 0.75));
}

.gin--dark-mode .toolbar .toolbar-bar .toolbar-icon-flowdrop:hover::before,
.gin--dark-mode .toolbar .toolbar-bar .toolbar-icon-flowdrop-dashboard:hover::before,
.gin--dark-mode .toolbar .toolbar-bar .toolbar-icon-entity-flowdrop-node-type-overview:hover::before,
.gin--dark-mode .toolbar .toolbar-bar .toolbar-icon-entity-flowdrop-node-category-overview:hover::before,
.gin--dark-mode .toolbar .toolbar-bar .toolbar-icon-entity-flowdrop-trigger-config-collection:hover::before,
.gin--dark-mode .toolbar .toolbar-bar .toolbar-icon-entity-flowdrop-job-collection:hover::before,
.gin--dark-mode .toolbar .toolbar-bar .toolbar-icon-entity-flowdrop-job-type-collection:hover::before {
  background-color: var(--gin-color-primary, #69b3ff);
}

.gin--dark-mode .toolbar .toolbar-bar .toolbar-icon-flowdrop.is-active::before,
.gin--dark-mode .toolbar .toolbar-bar .toolbar-icon-flowdrop-dashboard.is-active::before,
.gin--dark-mode .toolbar .toolbar-bar .toolbar-icon-entity-flowdrop-node-type-overview.is-active::before,
.gin--dark-mode .toolbar .toolbar-bar .toolbar-icon-entity-flowdrop-node-category-overview.is-active::before,
.gin--dark-mode .toolbar .toolbar-bar .toolbar-icon-entity-flowdrop-trigger-config-collection.is-active::before,
.gin--dark-mode .toolbar .toolbar-bar .toolbar-icon-entity-flowdrop-job-collection.is-active::before,
.gin--dark-mode .toolbar .toolbar-bar .toolbar-icon-entity-flowdrop-job-type-collection.is-active::before {
  background-color: var(--gin-color-primary-active, #69b3ff);
}

/**
 * Gin Theme Dark Mode - Tray Icons.
 *
 * In dark mode, the tray background is also dark, so icons should use
 * a light/white color similar to the toolbar bar.
 */
.gin--dark-mode .toolbar .toolbar-tray .toolbar-icon-flowdrop::before,
.gin--dark-mode .toolbar .toolbar-tray .toolbar-icon-flowdrop-dashboard::before,
.gin--dark-mode .toolbar .toolbar-tray .toolbar-icon-entity-flowdrop-node-type-overview::before,
.gin--dark-mode .toolbar .toolbar-tray .toolbar-icon-entity-flowdrop-node-category-overview::before,
.gin--dark-mode .toolbar .toolbar-tray .toolbar-icon-entity-flowdrop-trigger-config-collection::before,
.gin--dark-mode .toolbar .toolbar-tray .toolbar-icon-entity-flowdrop-job-collection::before,
.gin--dark-mode .toolbar .toolbar-tray .toolbar-icon-entity-flowdrop-job-type-collection::before {
  background-color: var(--gin-icon-color, rgb(255, 255, 255, 0.75));
}

/**
 * Gin Dark Mode - Tray icon active state.
 *
 * In dark mode, the tray has a dark background, so the active state should
 * use the same light/white color as the default state.
 */
.gin--dark-mode .toolbar .toolbar-tray .toolbar-icon-flowdrop.is-active::before,
.gin--dark-mode .toolbar .toolbar-tray .toolbar-icon-flowdrop-dashboard.is-active::before,
.gin--dark-mode .toolbar .toolbar-tray .toolbar-icon-entity-flowdrop-node-type-overview.is-active::before,
.gin--dark-mode .toolbar .toolbar-tray .toolbar-icon-entity-flowdrop-node-category-overview.is-active::before,
.gin--dark-mode .toolbar .toolbar-tray .toolbar-icon-entity-flowdrop-trigger-config-collection.is-active::before,
.gin--dark-mode .toolbar .toolbar-tray .toolbar-icon-entity-flowdrop-job-collection.is-active::before,
.gin--dark-mode .toolbar .toolbar-tray .toolbar-icon-entity-flowdrop-job-type-collection.is-active::before {
  background-color: var(--gin-icon-color, rgb(255, 255, 255, 0.75));
}

/* ==========================================================================
 * ACCESSIBILITY
 * ========================================================================== */

/**
 * High Contrast Mode Support.
 */
@media (forced-colors: active) {
  .toolbar .toolbar-bar .toolbar-icon-flowdrop::before,
  .toolbar .toolbar-bar .toolbar-icon-flowdrop-dashboard::before,
  .toolbar .toolbar-bar .toolbar-icon-entity-flowdrop-node-type-overview::before,
  .toolbar .toolbar-bar .toolbar-icon-entity-flowdrop-node-category-overview::before,
  .toolbar .toolbar-bar .toolbar-icon-entity-flowdrop-trigger-config-collection::before,
  .toolbar .toolbar-bar .toolbar-icon-entity-flowdrop-job-collection::before,
  .toolbar .toolbar-bar .toolbar-icon-entity-flowdrop-job-type-collection::before {
    background: linktext !important;
  }
}
