:root {
    --cursor-default: url('/cursors/default.svg') 0 0, default;
    --cursor-pointer: url('/cursors/pointer.svg') 0 0, pointer;
    --cursor-text: url('/cursors/text.svg') 4 0, text;
    --cursor-not-allowed: url('/cursors/not-allowed.svg') 6 6, not-allowed;
    --cursor-ew-resize: url('/cursors/ew-resize.svg') 6 4, ew-resize;
}

.dark {
    --cursor-default: url('/cursors/default-dark.svg') 0 0, default;
    --cursor-pointer: url('/cursors/pointer-dark.svg') 0 0, pointer;
    --cursor-text: url('/cursors/text-dark.svg') 4 0, text;
    --cursor-not-allowed: url('/cursors/not-allowed-dark.svg') 6 6, not-allowed;
    --cursor-ew-resize: url('/cursors/ew-resize-dark.svg') 6 4, ew-resize;
}

@media (pointer: fine) {
    html {
        cursor: var(--cursor-default);
    }

    a[href],
    button:not(:disabled),
    [role='button']:not([aria-disabled='true']),
    label[for],
    select,
    summary,
    [type='button'],
    [type='submit'],
    [type='reset'],
    [type='checkbox'],
    [type='radio'],
    [tabindex]:not([tabindex='-1']) {
        cursor: var(--cursor-pointer);
    }

    input:not([type='button']):not([type='submit']):not([type='reset']):not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range']):not([type='color']),
    textarea {
        cursor: var(--cursor-text);
    }

    :disabled,
    [aria-disabled='true'],
    .disabled {
        cursor: var(--cursor-not-allowed);
    }

    .cursor-default {
        cursor: var(--cursor-default) !important;
    }

    .cursor-pointer {
        cursor: var(--cursor-pointer) !important;
    }

    .cursor-text {
        cursor: var(--cursor-text) !important;
    }

    .cursor-not-allowed {
        cursor: var(--cursor-not-allowed) !important;
    }

    .cursor-e-resize,
    .cursor-w-resize,
    .cursor-ew-resize {
        cursor: var(--cursor-ew-resize) !important;
    }
}