/* End-widget color rotation.
 *
 * Defines a 5-color palette and cycles through it using :nth-child().
 * End widgets are children of their own container box in taffybar's layout,
 * so nth-child counts only among siblings in that box.
 *
 * NOTE: These rules also match workspace .outer-pad elements.
 * taffybar.css resets workspace pills via `.workspaces .outer-pad` which
 * has equal specificity but comes later in the cascade, so it wins.
 *
 * To change the palette, edit the @define-color values below.
 * To add more colors to the rotation, add end-color-6-* etc. and a
 * corresponding :nth-child(Nn+6) rule block (updating N in all selectors).
 */

/* --- Rotation palette (5 colors) --- */

/* 1 — indigo */
@define-color end-color-1-bg      rgba(50, 60, 160, 0.92);
@define-color end-color-1-fg      #d5d8f8;
@define-color end-color-1-border  rgba(90, 100, 210, 0.60);

/* 2 — purple */
@define-color end-color-2-bg      rgba(110, 45, 160, 0.92);
@define-color end-color-2-fg      #e8d5f8;
@define-color end-color-2-border  rgba(155, 85, 210, 0.60);

/* 3 — emerald */
@define-color end-color-3-bg      rgba(25, 130, 75, 0.92);
@define-color end-color-3-fg      #c8f5e0;
@define-color end-color-3-border  rgba(55, 190, 115, 0.60);

/* 4 — teal */
@define-color end-color-4-bg      rgba(20, 120, 140, 0.92);
@define-color end-color-4-fg      #d0f2f8;
@define-color end-color-4-border  rgba(50, 175, 200, 0.60);

/* 5 — rose */
@define-color end-color-5-bg      rgba(160, 40, 70, 0.92);
@define-color end-color-5-fg      #f8d5e0;
@define-color end-color-5-border  rgba(210, 80, 115, 0.60);

/* --- Color rotation rules --- */

/* Slot 1: indigo (child 1, 6, 11, ...) */
.outer-pad:nth-child(5n+1) {
	background-color: @end-color-1-bg;
	border-color: @end-color-1-border;
	color: @end-color-1-fg;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 24px rgba(0, 0, 0, 0.30);
}

/* Slot 2: purple (child 2, 7, 12, ...) */
.outer-pad:nth-child(5n+2) {
	background-color: @end-color-2-bg;
	border-color: @end-color-2-border;
	color: @end-color-2-fg;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 24px rgba(0, 0, 0, 0.30);
}

/* Slot 3: emerald (child 3, 8, 13, ...) */
.outer-pad:nth-child(5n+3) {
	background-color: @end-color-3-bg;
	border-color: @end-color-3-border;
	color: @end-color-3-fg;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 24px rgba(0, 0, 0, 0.30);
}

/* Slot 4: teal (child 4, 9, 14, ...) */
.outer-pad:nth-child(5n+4) {
	background-color: @end-color-4-bg;
	border-color: @end-color-4-border;
	color: @end-color-4-fg;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 24px rgba(0, 0, 0, 0.30);
}

/* Slot 5: rose (child 5, 10, 15, ...) */
.outer-pad:nth-child(5n+5) {
	background-color: @end-color-5-bg;
	border-color: @end-color-5-border;
	color: @end-color-5-fg;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 24px rgba(0, 0, 0, 0.30);
}

/* --- SNI tray (center widget, not part of the rotation) --- */

.outer-pad.sni-tray {
	background-color: @widget-tray-bg;
	border-color: @widget-tray-border;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 24px rgba(0, 0, 0, 0.30);
}