/**
 * @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.
 * Uses filled icons for proper rendering as both
 * background-image (Claro) and mask-image (Gin).
 */
:root {
  /* Main FlowDrop icon - Share/network nodes */
  --flowdrop-icon-main: url('data:image/svg+xml,<svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6" version="1.1" id="svg4" sodipodi:docname="flowdrop-icon-small.svg" inkscape:version="1.2 (dc2aeda, 2022-05-15)" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"><defs id="defs8" /><g id="g6893-4-9-5-2" transform="matrix(0.09256625,0,0,0.09256625,-238.97044,-240.30425)" style="fill:none"><path style="fill:none;stroke-width:7.5;stroke-dasharray:none" d="m 2711.2521,2642.6022 v 142.4999 z" id="path1152-1-7-1-4" /><path style="fill:none;stroke:%23000000;stroke-width:14.4041;stroke-dasharray:none;stroke-opacity:1" d="m 2710.5646,2667.1847 0.6223,108.8908" id="path1160-08-5-7-1" sodipodi:nodetypes="cc" /><path style="fill:none;stroke:%23000000;stroke-width:14.4041;stroke-dasharray:none;stroke-opacity:1" d="m 2711.2521,2671.8319 v 27.5277 6.1172 c 0,0 0.8939,29.6279 -27.0094,48.9381 -22.0986,15.2931 -39.2864,12.2345 -41.7418,48.938 l -0.3819,3.8342" id="path6610-14-5-4-8" sodipodi:nodetypes="cccscc" /><path style="fill:none;stroke:%23000000;stroke-width:14.4041;stroke-dasharray:none;stroke-opacity:1" d="m 2711.2521,2671.8319 v 27.7675 6.1706 c 0,0 -0.8939,29.886 27.0094,49.3645 22.0986,15.4263 39.2864,12.341 41.7419,49.3643 l -0.3708,3.3105" id="path6610-14-7-2-5-2" sodipodi:nodetypes="cccscc" /><path d="m 2710.8154,2600.9445 19.0262,23.3154 c 4.6749,4.7731 7.5519,11.2977 7.5519,18.4926 0,14.6259 -11.8886,26.4825 -26.5679,26.4825 -14.6793,0 -26.5743,-11.8566 -26.5743,-26.4825 0,-7.1205 2.8186,-13.5851 7.4066,-18.3441 z" style="fill:%23000000;fill-opacity:1;stroke:%23000000;stroke-width:6.22234;stroke-dasharray:none;paint-order:fill" id="path21-6-4-4-1-6" /><circle style="fill:%23000000;fill-opacity:1;stroke:%23000000;stroke-width:6.22257;stroke-dasharray:none" cx="2710.8225" cy="2797.5466" id="ellipse23-6-57-9-4-0" r="22.499994" /><ellipse style="fill:%23000000;fill-opacity:1;stroke:%23000000;stroke-width:6.22234;stroke-dasharray:none" cx="2643.7522" cy="2829.687" id="ellipse25-7-9-4-6-3" rx="22.499958" ry="22.499996" /><ellipse style="fill:%23000000;fill-opacity:1;stroke:%23000000;stroke-width:6.22234;stroke-dasharray:none" cx="2778.752" cy="2829.687" id="ellipse27-8-8-4-0-9" rx="22.499958" ry="22.499996" /></g></svg>');

  /* 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;
}

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

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

.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.
 */
.toolbar .toolbar-bar .toolbar-icon-flowdrop::before,
.toolbar .toolbar-bar .toolbar-icon-flowdrop-dashboard::before {
  background-image: none;
  background-color: var(--gin-icon-color, rgba(255, 255, 255, 0.75));
  -webkit-mask-image: var(--flowdrop-icon-main);
  mask-image: var(--flowdrop-icon-main);
  -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-image: none;
  background-color: var(--gin-icon-color, rgba(255, 255, 255, 0.75));
  -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-image: none;
  background-color: var(--gin-icon-color, rgba(255, 255, 255, 0.75));
  -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-image: none;
  background-color: var(--gin-icon-color, rgba(255, 255, 255, 0.75));
  -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-image: none;
  background-color: var(--gin-icon-color, rgba(255, 255, 255, 0.75));
  -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-image: none;
  background-color: var(--gin-icon-color, rgba(255, 255, 255, 0.75));
  -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, #ffffff);
}

/* ==========================================================================
 * 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 {
  padding: 0.5rem 1rem;
  display: block;
  color: var(--gin-color-text, #333);
  text-decoration: none;
}

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

/**
 * 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 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, rgba(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);
}

/* ==========================================================================
 * 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;
  }
}
