/* Lives inside /assets/css/cursor/ alongside the .cur and .png files, so every url()
   below is a bare filename. URLs in a stylesheet resolve against the
   stylesheet's own location, so adding a "cursor/" prefix here would point one
   folder too deep. */

/* Base cursor lives on the root, and everything inherits from its parent.
   This is the key change: previously "*" set the arrow on every element
   individually, so a card's title or icon overrode the animated cursor
   running on the parent <a>. With inherit, children pick up whatever the
   anchor's cursor currently is, including mid-animation values. */
html {
	cursor: url(aero_arrow.png), auto !important;
}

* {
	cursor: inherit;
}

/* Was "*:active, *:onclick". :onclick is not a valid pseudo-class, and one
   invalid selector invalidates the whole comma-separated list, so this rule
   was being dropped entirely and the active state never animated. */
/* While the mouse button is held (or on click) every element shows the pressed
   cursor, click_2.png. This is a cursor declaration marked !important rather than an
   animation, because an !important declaration beats the hover animation below, so a
   pressed button or link stays on click_2 instead of flickering back to click_1.
   Text fields are left out so the text-select cursor stays while editing or selecting, and so is
   the button of a custom dropdown (.cd-trigger), which keeps the normal animation cycle. */
*:active:not(.cd-trigger):not(.cd-trigger *):not(textarea):not([contenteditable=""], [contenteditable=true]):not(input[type=text], input[type=password], input[type=url], input[type=number], input[type=search], input[type=email]):not(input[type=range], .cp-wheel, .cp-bright, [draggable=true], .is-selecting, .is-selecting *, .is-dragging, .is-dragging *) {
	cursor: url(click_2.png), auto !important;
}

/* Normal speed: 0.2 seconds per frame (click_1, click_2, click_1 over 0.4s). */
a:hover, button:hover, .hover, .btn, .btn:hover, .btn strong,
input[type=file]:hover, input[type=range]:hover, input[type=color]:hover, summary:hover, select:hover {
	animation: animate 0.4s infinite !important;
}

/* Fast speed, half of the normal cycle: 0.1 seconds per frame (0.2s for the two-frame cycle).
   Used for checkboxes, radios, toggles, the items inside a custom dropdown list (.cd-option) and the
   items of a right click or action menu (.ctxmenu button).
   Change the duration here to tune it. */
input[type=checkbox]:hover, input[type=radio]:hover, .form-check-input, .form-switch:hover,
.form-switch .form-check-label:hover, .cd-option:hover, .cd-option.cd-active:hover,
.ctxmenu button:hover {
	animation: animate 0.2s infinite !important;
}

/* Browsers give these controls their own "default" cursor, and a "*" rule does not reach
   pseudo-elements, so the "Choose file" button of <input type="file"> fell back to the system
   arrow. Inherit from the input, which carries the animated cursor on hover. The same goes for the
   other native controls. (The opened list of a native <select> is drawn by the browser and cannot
   be given a cursor from CSS, which is why the app replaces dropdowns with dropdown.js.) */
::file-selector-button,
select,
select option,
input[type=file],
input[type=checkbox],
input[type=radio],
input[type=range],
input[type=color],
summary {
	cursor: inherit;
}

/* Text cursor: aero_select.png over every text field and while typing or selecting text in one, and
   while text anywhere on the page is being selected with the mouse (the .is-selecting class, set by
   app.js between pressing the button and releasing it). The middle of the picture is the point of the
   cursor: app.js measures the picture and sets --sel-hx and --sel-hy, and 16 is used until it has.
   Element-specific cursors still win over the inherited one, since a type selector outranks the
   universal selector. Checkboxes, radios, range, colour and file inputs are covered by the
   "inherit" rule above (higher specificity), so only real text fields get this cursor. */
input,
textarea,
[contenteditable=""],
[contenteditable=true] {
	cursor: url(aero_select.png) var(--sel-hx, 16) var(--sel-hy, 16), text;
}

html.is-selecting,
html.is-selecting * {
	cursor: url(aero_select.png) var(--sel-hx, 16) var(--sel-hy, 16), text !important;
}

/* Grab cursor: while something is being grabbed to be dragged (a slider thumb, the colour wheel and
   brightness slider of /assets/css/color-picker/, anything marked draggable="true" while the button is held,
   and everything while the page runs its own drag, the .is-dragging class), the cursor plays
   grab_1.png, grab_2.png, grab_3.png and grab_4.png once and then stays on grab_4.png for as long as
   the button is held. The animation runs once ("forwards" keeps the last frame) and starts again at
   the next grab. The point of the cursor is the top left corner of the picture, the same as the
   other cursors, so nothing shifts when a grab starts (set --grab-hx and --grab-hy to move it). step-end switches picture at each keyframe instead of in the
   middle between two. The native HTML5 drag and drop of the browser draws its own cursor once the
   drag has begun and CSS cannot change that, so there the animation only plays while the button
   goes down. */
input[type=range]:active,
.cp-wheel:active,
.cp-bright:active,
[draggable=true]:active,
html .is-dragging:not(.zz):not(.zz),
html .is-dragging *:not(.zz):not(.zz) {
	cursor: url(grab_4.png) var(--grab-hx, 0) var(--grab-hy, 0), grabbing;
	animation: grab 0.2s step-end forwards !important;
}

@keyframes grab {
	0% {
		cursor: url(grab_1.png) var(--grab-hx, 0) var(--grab-hy, 0), grabbing;
	}
	25% {
		cursor: url(grab_2.png) var(--grab-hx, 0) var(--grab-hy, 0), grabbing;
	}
	50% {
		cursor: url(grab_3.png) var(--grab-hx, 0) var(--grab-hy, 0), grabbing;
	}
	75%, 100% {
		cursor: url(grab_4.png) var(--grab-hx, 0) var(--grab-hy, 0), grabbing;
	}
}

@keyframes animate {
	0% {
		cursor: url(click_1.png), auto;
	}
	50% {
		cursor: url(click_2.png), auto;
	}
	100% {
		cursor: url(click_1.png), auto;
	}
}

a i, button i {
	pointer-events: none;
}